动态插入嵌套控制器

Dynamically insert nested controller

本文关键字：控制器 嵌套 插入 动态      更新时间：2023-09-26

我有一个简单的ASP.NET MVC应用程序，它包含一个ng控制器。使用局部视图，我在这个控制器中注入了另一个仅在需要时使用的ng控制器。我怎么能使它工作，因为我无法正确地装订。这里有一个我需要的简化版本。

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

如果您想手动插入HTML的部分，您必须通知Angular您已经这样做了。具体来说，使用$compile服务将HTML模板链接到特定的范围，从而使绑定"有效"。最好在指令中而不是在控制器中做这种事情，但为了演示的目的，这就可以了

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

您编写的是jquery，而不是angularJS。在angular中，你应该在HTML上有一个ng视图，在你的代码中你应该调用一个路由（使用ng路由器）或一个状态（使用ui路由器）来代替tempalte。您的HTML代码可以位于以下两个位置之一：

1） 在tempalte:
下的状态定义中2） 在将用CCD_ 3属性引用的外部HTML模板文件中。

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

   <div ng-view>
       <button> button goes here </button>
    </div>
相关文章：