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
Post a Comment