动态插入嵌套控制器

我有一个简单的ASP.NET MVC应用程序，它包含一个ng控制器。使用局部视图我在此控制器内部注入了另一个仅在需要时才使用的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>

和JavaScript部分：

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" 
    }; 
}

来源

2014-10-30 Razvan

如果你想手动插入HTML位，必须通知角度，你已经这样做了。具体而言，使用$compile服务将HTML模板与特定范围关联，从而使绑定“存活”。最好是在指令而不是控制器中做这种事情，但为了演示的目的，这是可行的。

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

来源

2014-10-30 10:01:18 user2943490

你正在写的jQuery，不angularJS。在角度上你应该有一个HTML的ng视图，在你的代码中你应该调用一个路由（使用ng-router）或一个状态（使用ui-router）来替换tempalte。你的HTML代码可以在2的一个地方：在将与templateUrl:属性被引用的外部HTML模板文件

1）在你的状态定义tempalte:
2）下。

该模板将替换您的代码中具有ng-view属性的任何内容。所以，如果你想隐藏自己的按钮，它应该是：

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

来源

2014-10-30 09:49:33

动态插入嵌套控制器

回答

相关问题