Блог

У меня есть тестовый проект MVC, в котором я пытаюсь использовать компоненты React внутри директив Angular. Он отобразит директиву, но любые реквизиты, которые я передаю, не определены. Вот мои файлы:

~/Scripts/Directives/HelloDirective.js :

 var Hello = React.createClass({

    render: function () {
        return React.DOM.span(null,
          'Hello '   this.props.email
        );
    }
});

angular.module('App').value('Hello', Hello);

angular.module('App')
.directive( 'hello', function( reactDirective ) {
  return reactDirective( Hello, ['email'] );
});
  

Моя структура папок для моих представлений выглядит следующим образом:

~/Views/Dashboard/Index.cshtml — это мой основной вид, который имеет ng-view

~/Views/Dashboard/Dash.cshtml — это помещается в основное представление

Внутри Dash.cshtml у меня есть

 <div ng-controller="DashboardController" class="btn-group">
    <hello email="{{name}}"></hello>
</div>
  

Вот мой DashboardController.js файл:

 angular.module("App")
.controller("DashboardController", ['$scope', 'Welcome', '$cookies', function ($scope, Welcome, $cookies) {
    Welcome.name().success(function (data) {
        $scope.name = data.name;
    });

    $scope.ChangeName = function (val) {
        Welcome.EditName(val).success(function (data) {

        });
    };
    /*
    $scope.isOff() = function () {
        var value = $cookies.get('Off');
        return value === null;
    }

    $scope.Off = function () {
        $cookies.put('Off', 'This turns the green button off');
    }
    $scope.On = function () {
        $cookies.remove('Off');
    }
    */
}]);
  

Как только страница завершит загрузку, все, что отображается, будет Hello undefined .

По какой-то причине реквизит электронной почты внутри тега hello не читается, не распознается или что-то в этомроде.

Я уже протестировал, чтобы убедиться, что мой WelcomeFactory возвращает данные, просто отображая {{name}} на экране, и это работает просто отлично.

Может кто-нибудь сказать мне, где я ошибся?

Спасибо!

Итак, ответ на этот вопрос был раздражающе простым. На самом деле все сводилось к синтаксису. Под этим я подразумеваю компонент React, который у меня выглядел следующим образом:

 <hello email="{{name}}"></hello>
  

Я продолжал получать undefined для электронного письма, поскольку оказалось, что проблема заключалась в фигурных скобках. Как только я их удалил, компонент React выглядел следующим образом:

 <hello email="name"></hello>
  

Затем я начал выводить значение на экран.

Надеюсь, это поможет кому-то еще разобраться в этой проблеме!