javascript - Dynamically insert nested controller -



javascript - Dynamically insert nested controller -

i have simple asp.net mvc application contains ng-controller. using partial view inject within controller ng-controller used when needed. how can create work because not create binding properly. here's plunker simplified version of 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 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 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 = angular.module("myapp");' + 'a.controller("mynestedctrl", ["$scope", mynestedctrl] );' + '</script>'); } function mynestedctrl($scope) { $scope.name = "childname"; $scope.user = { name: "paul" }; }

if want manually insert bits of html, must notify angular have done so. specifically, utilize $compile service link html template specific scope, thereby making bindings "live". it's preferable sort of thing in directive , not controller, purposes of demonstration, do.

plunker: http://plnkr.co/edit/rmyyynlhkeoqwvbelydp?p=preview

javascript asp.net-mvc angularjs

Comments

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -