bind controller on dynamic HTML

Question

У меня есть HTML-страница с различными разделами, которые загружаются с помощью AJAX. Я создал контроллер для каждого из разделов.

Как можно связать контроллер с разделом, который динамически добавлен в HTML?

Я нашел очень сложные решения, которые я даже не знаю, применимы ли они.

Мне нужно самое простое, простое решение, что-то похожее на ko.applyBindings($dom[0], viewModel) для тех, кто работал с KnockoutJs.

Индекс HTML

<div class="row" ng-app="app"> 
    <div class="col-xs-3"> 
     <ul class="nav nav-pills nav-stacked"> 
      <li> 
       <a href="#/profile">Profile</a> 
      </li> 
     </ul> 
    </div> 
    <div class="col-xs-9"> 
     <div id="container"><!-- load dynamic HTML here --></div> 
    </div> 
</div> 

Dynamic HTML

<div ng-controller="profile"> 
    First Name: <input type="text" ng-model="firstName"><br> 
    Last Name: <input type="text" ng-model="lastName"><br> 
    <br> 
    Full Name: {{firstName + " " + lastName}} 
</div> 

Javascript:

var app = angular.module('app', []); 

app.controller('profile', function ($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
}); 

// load new HTML 
// normally this is triggered by a link/button 
$(function() { 
    $.get("/EditProfile/Profile", function (data, status) { 
     $("#container").html(data); 
    }); 
}); 

Answer 1

Не используйте jQuery для встраивания html в ваш контейнер. Если вы используете jQuery, AngularJS не может отслеживать манипуляции DOM и триггерные директивы. Вы можете использовать директиву ng-include AngularJS.

В файле index.html:

... 
<div id="container"> 
    <div ng-include="'/EditProfile/Profile'"></div> 
</div> 
... 

Если вы хотите, вы можете сделать это условно:

... 
<div id="container"> 
    <div ng-if="profilePage" ng-include="'/EditProfile/Profile'"></div> 
</div> 
... 

С этим примером, если вы установите profilePage переменную true, профиль HTML будет нагрузка и визуализировать ng-include.

Для получения более подробной информации посетите ngInclude documentation.

К слову, наилучшая практика включения представлений в ваш макет путем запуска одинаковых кликов по ссылкам использует маршрутизаторы. Вы можете использовать Angular's ngRoute module или uiRouter как еще один популярный.

Если вы используете модуль ngRoute, ваш index.html выглядит следующим образом:

<div class="row" ng-app="app"> 
    <div class="col-xs-3"> 
     <ul class="nav nav-pills nav-stacked"> 
      <li> 
       <a href="#/profile">Profile</a> 
      </li> 
     </ul> 
    </div> 
    <div class="col-xs-9"> 
     <div id="container" ng-view><!-- load dynamic HTML here --></div> 
    </div> 
</div> 

И с конфигурацией маршрутизатора, как показано ниже, профиль HTML будет автоматически загружен и оказываемая ngRoute внутри ngView директивы:

angular.module('myapp', []).config(function($routeProvider) { 
    $routeProvider 
    .when('/profile', { 
    templateUrl: '/EditProfile/Profile', 
    controller: 'ProfileController' 
    }); 
});