我正在基于标题中指定的框架构建一个 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,而不是定义单独的模块:相同的结果(顺便问一下:有什么区别?)
非常感谢任何线索。
最佳答案
使用指令时需要遵循 Angular 规则。指令名称raisedButton
应在标记中使用 <raised-button>
。 (将指令名称从 RaisingButton 更改为 raiseButton)。
指令属性只能是字符串,因此像在 React 中那样使用 Primary="{true}"可能不是您想要的。
试试这个:
<raised-button label="Primary" primary="true"></raised-button>
关于angularjs - 让 AngularJS、ReactJS、ngReact、Browserify、Reactify、Material-UI 能够很好地协同工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28904674/