Question

我根据标题中指定的框架构建Web应用程序：

AngularJS：MVP引擎
ReactJS：＆＃34; V＆＃34; MVP中的组件
ngReact：将React组件注入AngularJS应用程序
Browserify + Reactity：定义使用react-tap-event-plugin的material-UI使用的require（）函数
Material-UI：用于添加Material Design主题组件的ReactJS组件集

我的实施策略如下：

构建一个AngularJS（它是一个现有的应用程序，它可以工作）
加载ReactsJS和ngReact
加载Material-UI：它的工作原理＆gt;＆gt;我尝试过（在 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 函数调用就像我使用时一样（在我的一个视图中）：

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

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

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

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

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

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

非常感谢任何线索。

Answer 1

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

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

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

使AngularJS，ReactJS，ngReact，Browserify，Reactify，Material-UI很好地协同工作

1 个答案: