制作AngularJS，ReactJS，ngReact，Browserify，Reactify，Material一起玩。

Question

我正在构建一个基于标题中指定的框架的web应用程序：

• AngularJS: MVP发动机
• ReactJS: MVP中的"V“组件
• ngReact:向AngularJS应用程序中注入反应组件
• Browserify+Reactity:定义material使用的require()函数，该函数使用react抽头-事件插件
• 材料-用户界面:添加材料设计主题组件的ReactJS组件集

我的执行策略如下：

• 构造一个AngularJS (它是一个现有的应用程序，它可以工作)
• 负载ReactsJS和ngReact
• load Material UI:它可以运行我尝试过的>> (在>>中) Console.log(梅)；

产出如下：

    Object {AppBar: function, AppCanvas: function, Checkbox: function, DatePicker: function, Dialog: function…}

这是一套符合预期的材料设计组件。

js/directives.js文件(包含在脚本中的index.html中)由以下代码组成：

/* define directives for ngReact's Material-Ui components */
angular.module('myapp.reactDirectives', [])
.directive('RaisedButton', function(reactDirective) {
    return reactDirective(mui.RaisedButton);
});

现在，一切看起来都很好，但是看起来AngularJS忽略了在使用(在我的一个视图中)时对的.directive函数调用的忽略：

 <RaisedButton label="Primary" primary={true} />

正如在ngReact文档中所解释的，根本没有输出。

实际上，似乎DOM没有被React的虚拟DOM所改变

 <raisedbutton label="Primary" primary="{true}" class="ng-scope"></raisedbutton>

在.directive定义中，我尝试了：

• console.log("load指令.“)：如果它放在JS文件中，但位于.directive函数调用的之外，它将显示输出。如果在.directive()内部，控制台上没有输出。
• 我试着用‘’和‘’写"Raisedbutton“
• 我尝试使用app.directive，而不是定义一个单独的模块:相同的结果(顺便问一句:有什么区别？)

任何线索都是非常感谢的。

Answer 1

在使用指令时，需要遵循角度规则。应该在标记中使用指令名raisedButton作为<raised-button>。(将指令名从RaisedButton更改为raisedButton)。

指令属性只能是字符串，因此使用primary="{true}“(如in React )可能不是您想要的。

试试这个：<raised-button label="Primary" primary="true"></raised-button>