2014-10-30 2 views
0

У меня есть простое приложение 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" 
    }; 
} 

ответ

1

Если вы хотите, чтобы вручную вставлять куски HTML, вы должны уведомить Угловое, что вы сделали. В частности, используйте службу $compile для связывания шаблона HTML с определенной областью, тем самым делая привязки «живыми». Желательно делать такие вещи в директиве, а не в контроллере, но для целей демонстрации это будет сделано.

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

1

вы пишете JQuery, не angularJS. В угловом режиме у вас должен быть ng-view на HTML, а в вашем коде вы должны вызвать маршрут (с ng-router) или состояние (с ui-router), чтобы заменить tempalte. Ваш HTML код может находиться в одном из 2 мест:

1) в вашем определении состояния под tempalte:
2) во внешнем файле шаблона HTML, который будет ссылка с атрибутом templateUrl:.

шаблон заменит что-либо в вашем теге, у которого есть атрибут ng-view. Так что если вы хотите, чтобы скрыть кнопку должно быть:

<div ng-view> 
     <button> button goes here </button> 
    </div> 
Смежные вопросы