在ASP .NET MVC中使用ngReact

Question

我有一个MVC测试项目，我试图在Angular指令中使用React组件。它将呈现指令，但我传入的任何属性都是未定义的。以下是我的文件：

~/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}}来返回数据，而且它工作得很好。

谁能告诉我哪里出错了？

谢谢!

Answer 1

所以这个问题的答案简单得让人恼火。这真的归结到语法上了。我的意思是React组件，我看起来是这样的：

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

我一直没有给邮件下定义，结果发现问题出在大括号上。一旦我把它们去掉，React组件看起来就像这样：

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

然后我开始在屏幕上得到一个值输出。

希望这对其他正在研究这个问题的人有所帮助！