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

Question

I'm building a web application based on the frameworks specified in the title:

• AngularJS: MVP engine
• ReactJS: "V" component in MVP
• ngReact: to inject React components into the AngularJS application
• Browserify+Reactity: to define require() function used by material-UI which uses react-tap-event-plugin
• Material-UI: set of ReactJS components to add Material Design-themed components

My implementation strategy is as follows:

• structure an AngularJS (it's an existing application, it works)
• load ReactsJS and ngReact

• load Material-UI: it works >> I tried (within js/directives.js):

  console.log(mui);
  

and the output is:

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

which is a set of Material Design components as expected.

js/directives.js file (included within script in index.html) is made of the following code:

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

Now, everything looks fine but it looks like AngularJS is ignoring my .directive function call as when I use (in one of my views):

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

as explained in ngReact's documentation, there is no output at all.

Indeed is seems the DOM is not altered by React's Virtual DOM:

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

In the .directive definition I tried:

• console.log("load directives..."): if it's put in the JS file but outside of the .directive function call, it shows the output. if inside the .directive() no output on console.
• I tried to write "Raisedbutton" with and without ' '
• I tried to use app.directive, instead of defining a separate module: same result (by the way: what's the difference?)

Any clue is greatly appreciated.

Answer 1

You need to follow angular rules when using directives. The directive name raisedButton should be used in markup as <raised-button>. (Change directive name from RaisedButton to raisedButton).

The directive attributes can only be strings, so using primary="{true}" like in React is probably not what you wanted.

Try this: <raised-button label="Primary" primary="true"></raised-button>