0

我有一个 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 标签内的 email 属性没有被读取或识别或其他东西。

我已经进行了测试，以确保我的 WelcomeFactory 通过仅{{name}}在屏幕上显示来返回数据并且它工作得很好。

有人可以告诉我我哪里出错了吗？

谢谢！

4

1 回答 1

0

所以这个问题的答案很简单。它真的归结为语法。我的意思是我看起来像这样的 React 组件：

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

我一直对电子邮件不确定，因为事实证明问题是花括号。一旦我把它们拿出来，React 组件看起来像这样：

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

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

希望这可以帮助其他人研究这个问题！

于 2016-10-22T14:07:44.297 回答