Javascript 动态插入嵌套控制器_Javascript_Asp.net Mvc_Angularjs

Javascript 动态插入嵌套控制器

javascript asp.net-mvc angularjs

Javascript 动态插入嵌套控制器,javascript,asp.net-mvc,angularjs,Javascript,Asp.net Mvc,Angularjs,我有一个简单的ASP.NET MVC应用程序，其中包含一个ng控制器。使用局部视图，我在这个控制器中注入另一个仅在需要时使用的ng控制器。我怎样才能使它工作，因为我不能使绑定正确。这里有一个简单的版本，我需要什么 <body ng-app="MyApp"> <div id='parent' ng-controller="MyCtrl"> <label>Primitive</label> <input type="text

我有一个简单的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"
  };
}

var-app=angular.module（“MyApp”，[]）；
app.controller（“MyCtrl”，函数（$scope）{
$scope.name=“ParentName”；
$scope.user={
姓名：“彼得”
};
});
函数addNested（）{
$（“#父项”）。追加(
''+
“原始的”+
“
”+
'带有显式$parent引用的基元
'+
'' +
“对象”+
'' +
'' +
'' +
'var a=angular.module（“MyApp”）；'+
'a.controller（“MyNestedCtrl”[“$scope”，MyNestedCtrl]）；'+
'');
}
函数MyNestedCtrl（$scope）
{
$scope.name=“ChildName”；
$scope.user={
姓名：“保罗”
};
}

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

1）在

tempalte:

2）在将使用

templateUrl:

属性引用的外部HTML模板文件中

模板将替换标记中具有

ng view

属性的任何内容。因此，如果要隐藏按钮，则应：

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


按钮在这里

如果您想手动插入HTML，必须通知Angular您已经这样做了。具体来说，使用

$compile

服务将HTML模板链接到特定范围，从而使绑定“活动”。最好是在指令中而不是在控制器中执行此类操作，但出于演示的目的，这样就可以了

普朗克：