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

Question

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

AngularJS：MVP 引擎
ReactJS："V" MVP 中的组件
ngReact：将 React 组件注入 AngularJS 应用程序
Browserify+Reactity：定义 material-UI 使用的 require() 函数，它使用 react-tap-event-plugin
Material-UI：要添加的 ReactJS 组件集 Material Design-themed 组件

我的实现策略如下：

构造一个 AngularJS（它是一个现有的应用程序，它可以工作）
加载 ReactsJS 和 ngReact
加载Material-UI：有效>>我试过了（在js/directives.js）：
```
console.log(mui);
```

输出为：

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

这是一组 Material 预期的设计组件。

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中所述，根本没有输出。

确实 DOM 似乎没有被 React 的 Virtual DOM:

改变

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

在 .directive 定义中我试过：

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

非常感谢任何线索。

Answer 1

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

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

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

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

Making AngularJS, ReactJS, ngReact, Browserify, Reactify, Material-UI play well together

angularjs

reactjs