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.

Wiktor Kozlik · Accepted Answer · 2015-03-07 03:49:59Z

2

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>

answered Mar 7, 2015 at 3:49

Wiktor Kozlik

8431 gold badge7 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

dragonmnl Over a year ago

thank you . I will try in few minutes. How do I verify if a directive has been correctly defined in Angular? (I have Angular Tools for Chrome) Also the "{true} is defined is adviced in ngReact's docs which is in fact an Angular module

dragonmnl Over a year ago

I just tried. it simply doesn't work as there was no instante of the directive

Wiktor Kozlik Over a year ago

Try to define a different directive with a simple Rect component. This will help you narrow down the problem.

dragonmnl Over a year ago

what do you mean? that directive is the simplest possible and it's written exactly as explained in the docs

Wiktor Kozlik Over a year ago

Did you forget to inject ngReact as a dependency? angular.module('myapp.reactDirectives', ['react'])

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related