Question

我有一个简单的ASP.NET MVC应用程序，它包含一个ng-controller。使用局部视图，我在该控制器内注入另一个仅在需要时使用的ng-controller。我怎样才能使它工作，因为我无法正确地进行绑定。这是一个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"
  };
}

Answer 1

你正在写jquery，而不是angularJS。在角度上你应该在HTML上有一个ng-view，在你的代码中你应该调用一个路由（使用ng-router）或一个状态（使用ui-router）来替换tempalte。您的HTML代码可以位于以下两个位置之一：

1）在tempalte:下的州定义中 2）在将使用templateUrl:属性引用的外部HTML模板文件中。

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

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

Answer 2

如果要手动插入HTML，您必须通知Angular您已经这样做了。具体来说，使用$compile服务链接具有特定范围的HTML模板，从而使绑定＆＃34; live＆＃34;。在指令而不是控制器中执行此类操作更可取，但出于演示的目的，这样做。

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

动态插入嵌套控制器

2 个答案: