angularjs - 让 AngularJS、ReactJS、ngReact、Browserify、Reactify、Material-UI 能够很好地协同工作

Question

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

• AngularJS:MVP 引擎
• ReactJS:MVP 中的“V”组件
• ngReact:将 React 组件注入(inject) 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 的脚本内)由以下代码组成:

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

现在，一切看起来都很好，但看起来 AngularJS 忽略我的 .directive 函数调用，就像我使用时(在我的一个 View 中):

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

如 ngReact's documentation 中所述，根本没有输出。

事实上，DOM 似乎没有被 React 的虚拟 DOM 改变:

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

在.directive定义中我尝试过:

• console.log("loaddirectives..."):如果将其放入 JS 文件中，但位于 .directive 函数调用的外部，则会显示输出。如果在 .directive() 内，控制台上没有输出。
• 我尝试编写带或不带“”的“Raishedbutton”
• 我尝试使用 app.directive，而不是定义单独的模块:相同的结果(顺便问一下:有什么区别？)

非常感谢任何线索。

Answer 1

使用指令时需要遵循 Angular 规则。指令名称raisedButton应在标记中使用 <raised-button> 。 (将指令名称从 RaisingButton 更改为 raiseButton)。

指令属性只能是字符串，因此像在 React 中那样使用 Primary="{true}"可能不是您想要的。

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