使AngularJS、ReactJS、ngReact、Browserify、Reactify、Material UI配合良好

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

• AngularJS:MVP引擎
• ReactJS：MVP中的“V”组件
• ngReact：将React组件注入AngularJS应用程序
• Browserify+Reactity：定义使用react-tap事件插件的材质UI使用的require（）函数
• 材质UI：用于添加以材质设计为主题的组件的ReactJS组件集

我的实施策略如下：

• 构造AngularJS（它是一个现有的应用程序，可以工作）
• 负载反应sjs和ngReact
• 加载材质UI：它工作>>我尝试过（在js/directions.js中）：

输出为：

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

这是一组预期的材料设计组件

js/directions.js文件（包含在index.html中的脚本中）由以下代码组成：

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

现在，一切看起来都很好，但看起来AngularJS在使用（在我的一个视图中）时忽略了我的指令函数调用：

如中所述，根本没有输出

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

console.log(mui);

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

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

• console.log（“加载指令…”）：如果它放在JS文件中，但在.directive函数调用的外部，它会显示输出。如果在.directive（）内，则控制台上没有输出
• 我试着写“Raisedbutton”，有没有“Raisedbutton”
• 我尝试使用app.directive，而不是定义一个单独的模块：相同的结果（顺便问一下：有什么区别？）

---

非常感谢您提供任何线索。

在使用指令时，您需要遵循角度规则。指令名

raisedButton

应作为

在标记中使用。（将指令名称从RaisedButton更改为RaisedButton）

指令属性只能是字符串，因此在React中使用primary=“{true}”可能不是您想要的

试试这个：

---

谢谢。我几分钟后再试。如何验证在Angular中是否正确定义了指令？（我有用于Chrome的角度工具）还有“{true}”定义是在ngReact的文档中提出的，这实际上是一个角度模块我刚刚尝试过。它根本不起作用，因为没有指令的实例。尝试用简单的Rect组件定义不同的指令。这将帮助您缩小问题的范围。你是什么意思？该指令是可能的最简单的指令，它完全按照e编写在docsDid中解释说，您忘记将ngReact作为依赖项注入？angular.module（'myapp.reactdirections'，['react']）

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