让 AngularJS、ReactJS、ngReact、Browserify、Reactify、Material-UI 一起玩得很好

Question

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

• AngularJS：MVP 引擎
• ReactJS：MVP 中的“V”组件
• ngReact：将 React 组件注入到 AngularJS 应用程序中
• Browserify+Reactity：定义使用 react-tap-event-plugin 的 material-UI 使用的 require() 函数
• Material-UI：一组 ReactJS 组件以添加 Material Design 主题的组件

我的实施策略如下：

• 构建一个 AngularJS（它是一个现有的应用程序，它可以工作）
• 加载 ReactsJS 和 ngReact

• 加载 Material-UI：它可以工作 >> 我尝试过（在 js/directives.js 内）：

  console.log(mui);
  

输出是：

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

这是预期的一组 Material Design 组件。

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

/* 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's documentation 中所述，根本没有输出。

React 的虚拟 DOM 似乎没有改变 DOM：

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

在我尝试的 .directive 定义中：

• console.log("load directives...")：如果它放在JS文件中但在.directive函数调用的之外，它会显示输出。如果在 .directive() 内部没有控制台输出。
• 我尝试编写带有和不带有''的“Raisedbutton”
• 我尝试使用 app.directive，而不是定义单独的模块：结果相同（顺便问一下：有什么区别？）

非常感谢任何线索。

Answer 1

使用指令时需要遵循角度规则。指令名称raisedButton 应在标记中使用<raised-button>。 （将指令名称从 RaisedButton 更改为 raiseButton）。

指令属性只能是字符串，所以在 React 中使用 primary="{true}" 可能不是你想要的。

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