Angularjs 动态HTML上的绑定控制器

我有一个包含不同部分的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>

---

不要使用jQuery将html嵌入到容器中。如果使用jQuery，AngularJS无法跟踪DOM操作和触发器指令。您可以使用AngularJS的

ng include

指令

在index.html文件中：

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

使用如下路由器配置，配置文件html将由ngView指令内的ngRoute自动加载和呈现：

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

---

关于这个问题的最重要的答案-是这个问题的一个很好的解决方案。

templateUrl

是否需要一个物理路径

/EditProfile/Profile

是服务器端入口点，不会触发：（我的坏！缺少

ng view

指令

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

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

<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>

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