Dynamically insert nested controller

Question

I have a simple ASP.NET MVC application which contains a ng-controller. Using a partial view I inject inside this controller another ng-controller used only when needed. How can I make it work because I could not make the binding properly. Here's a plunker with a simplified version of what I need.

<body ng-app="MyApp">
  <div id='parent' ng-controller="MyCtrl">
    <label>Primitive</label>
    <input type="text" ng-model="name">

    <label>Object</label>
    <input type="text" ng-model="user.name">

    <button onclick="addNested();">Add Nested Controller</button>
  </div>
</body>

And the javascript part:

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope) {
  $scope.name = "ParentName";
  $scope.user = {
    name: "Peter"
  };
});

function addNested() {
    $('#parent').append(
        '<div class="nested" ng-controller="MyNestedCtrl">'+
              '<label>Primitive</label>' +
              '<input type="text" ng-model="name"><br />' +

              '<label>Primitive with explicit $parent reference</label> <br />' +
              '<input type="text" ng-model="$parent.name">' +

              '<label>Object</label>' +
              '<input type="text" ng-model="user.name">' +
          '</div>' +
          '<script type="text/javascript">' +
              'var a = angular.module("MyApp");' +
                'a.controller("MyNestedCtrl", ["$scope", MyNestedCtrl] );' +
          '</script>');
}

function MyNestedCtrl($scope) 
{
    $scope.name = "ChildName";
  $scope.user = {
    name: "Paul"
  };
}

user2943490 · Accepted Answer · 2014-10-30 10:01:18Z

1

If you want to manually insert bits of HTML, you must notify Angular that you have done so. Specifically, use the $compile service to link an HTML template with a specific scope, thereby making the bindings "live". It's preferable to do this sort of thing in a directive and not a controller, but for the purposes of demonstration, this will do.

Plunker: http://plnkr.co/edit/RmYYynlHKEoQWVbELYDP?p=preview

answered Oct 30, 2014 at 10:01

user2943490

6,9402 gold badges24 silver badges39 bronze badges

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

Comments

Tally Barak · Accepted Answer · 2014-10-30 09:49:33Z

1

you are writing jquery, not angularJS. In angular you should have an ng-view on the HTML, and in your code you should call a route (with ng-router) or a state (with ui-router) to replace the tempalte. Your HTML code can be in one of 2 places:

1) in your state definition under tempalte:
2) in an external HTML template file that will be referenced with the templateUrl: attribute.

the template will replace anything in your tag that has the ng-view attribute. So if you want to hide your button it should be:

   <div ng-view>
       <button> button goes here </button>
    </div>

answered Oct 30, 2014 at 9:49

Tally Barak

2824 silver badges11 bronze badges

Collectives™ on Stack Overflow

Dynamically insert nested controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related