gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 14:22:01 24 4
gpt4 key购买 nike

我正在基于标题中指定的框架构建一个 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com