저는 컨트롤러가 포함 된 간단한 ASP.NET MVC 응용 프로그램이 있습니다. 부분보기를 사용하여이 컨트롤러 내부에 필요한 경우에만 다른 ng 컨트롤러를 삽입합니다. 바인딩을 제대로 만들 수 없기 때문에 어떻게 작동시킬 수 있습니까? 여기 내가 필요한 항목의 단순화 된 버전으로 plunker이 있습니다. 중첩 된 컨트롤러를 동적으로 삽입하십시오.
<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>
그리고 자바 스크립트 부분 :
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"
};
}