Using ngReact with ASP .NET MVC

Question

I have an MVC test project that I am trying to use React components inside Angular directives. It will render the directive, but any props I pass in are undefined. Here are my files:

~/Scripts/Directives/HelloDirective.js:

var Hello = React.createClass({

    render: function () {
        return React.DOM.span(null,
          'Hello ' + this.props.email
        );
    }
});

angular.module('App').value('Hello', Hello);

angular.module('App')
.directive( 'hello', function( reactDirective ) {
  return reactDirective( Hello, ['email'] );
});

My folder structure for my views goes like this:

~/Views/Dashboard/Index.cshtml - this is my main view that has ng-view

~/Views/Dashboard/Dash.cshtml - this gets put inside the main view

Inside Dash.cshtml I have

<div ng-controller="DashboardController" class="btn-group">
    <hello email="{{name}}"></hello>
</div>

Here is my DashboardController.js file:

angular.module("App")
.controller("DashboardController", ['$scope', 'Welcome', '$cookies', function ($scope, Welcome, $cookies) {
    Welcome.name().success(function (data) {
        $scope.name = data.name;
    });

    $scope.ChangeName = function (val) {
        Welcome.EditName(val).success(function (data) {

        });
    };
    /*
    $scope.isOff() = function () {
        var value = $cookies.get('Off');
        return value === null;
    }

    $scope.Off = function () {
        $cookies.put('Off', 'This turns the green button off');
    }
    $scope.On = function () {
        $cookies.remove('Off');
    }
    */
}]);

Once the page has finished loading up all that is rendered is Hello undefined.

For some reason the email prop inside the hello tag is not being read or recognized or something.

I have already tested to make sure that my WelcomeFactory returns data by just displaying {{name}} on the screen and it works just fine.

Can someone tell my where I went wrong?

Thanks!

score 0 · Answer 1 · answered Oct 22 '16 at 14:07

So the answer to this question was annoyingly simply. It really came down to syntax. What I mean by that was the React Component I had looked like this:

<hello email="{{name}}"></hello>

I kept getting undefined for the email, as it turns out the issue was the curly braces. Once I took those out the React Component looked like this:

<hello email="name"></hello>

Then I started to get a value output on the screen.

Hope this helps someone else looking into this issue!

Using ngReact with ASP .NET MVC

1 Answers1