在 AngularJS 中，如何动态创建一个新的 ngController？答案

【问题标题】：In AngularJS how can I create a new ngController dynamically?在 AngularJS 中，如何动态创建一个新的 ngController？
【发布时间】：2014-01-14 18:28:54
【问题描述】：

我正在尝试即时创建新的ngControllers，这可能吗？我不会用ngRepeat 或任何东西将它写入模板，因为用户可能永远不会创建某个ngController 的实例。

这是我当前模板的示例：

<div ng-controller="ViewUsers">
   <div class="viewUsersList">
      <table>
         <tr class="userRow" ng-click="viewUser(user.user_id)" ng-repeat="user in users">
            <td>{{user.first_name}} {{user.last_name}}
                <br />{{user.phone}}
            </td>
         </tr>
      </table>
    </div>
 </div>

到目前为止效果很好。当用户单击.userRow 时，它会调用viewUser(ID)。问题出在这里：

我想创建一个这样的新代码块：

<div ng-controller="UserDetail">
   {{first_name}}
</div>

并将其附加到 DOM。

因此，如果他们点击Bobby 和Sally，两个UserDetail 控制器对象将被添加到DOM 并相应地工作。（理想情况下，我想传入数据绑定的user 模型，但那是以后再说）。

我在 JSBin 中尝试了一个 ghetto 版本，但如果可能的话我宁愿不使用 JQuery：

http://jsbin.com/EdOteTav/2/edit

任何人都可以对此有所了解吗？提前致谢

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

我会稍微更改代码并使用指令而不是控制器。请参阅jsfiddle 中的这个简单快速的示例。

该指令将处理点击事件并显示您想要在 DOM 上显示的任何内容。您可以从指令内的scope.user 获取完整的用户对象。

【讨论】：

感谢您的提示。我最终用ng-controller="UserDetail" 而不是repeat 做了一个ng-repeat="user in users"。理想情况下，我会喜欢更多的封装（没有UserDetail 是ViewUsers 的孩子，但现在必须这样做）