在 angular 应用中添加部分视图和控制器

Question

我正在优化 Angular 应用程序的性能。我正在使用 ng-include 添加部分视图及其控制器。以下是代码片段

<!--show term rule view-->
<div id="showTermRule" ng-controller="TermRuleController as term" ng-if="showTermRule">
  <div data-ng-include src="'/Relevancy/termRule/termRule.html'" ng-if="!isPublsihed"></div>
  <div data-ng-include src="'/Relevancy/termRule/publishedTermRule.html'" ng-if="isPublsihed"></div>
</div>
<!--show function rule view-->
<div id="showFunctionRule" ng-controller="expressionBuilderController" ng-if="showFunctionRule">
  <div data-ng-include src="'/Relevancy/functionRule/functionRule.html'" ng-if="!isPublsihed"></div>
  <div data-ng-include src="'/Relevancy/functionRule/publishedFunctionRule.html'" ng-if="isPublsihed"></div>
</div>

<div id="showQueryRule" ng-controller="queryBuilderController" ng-if="showQueryRule">
  <div data-ng-include src="'/Relevancy/queryRule/queryRule.html'" ng-if="!isPublsihed"></div>
  <div data-ng-include src="'/Relevancy/queryRule/publishedQueryRule.html'" ng-if="isPublsihed"></div>
</div>

我有一个父控制器，我在其中使 "showTermRule" 变量为真并按如下方式广播事件

switch (rule) {
    case "Term Rules":
      $scope.currentRuleDisplayed = 'Significant Terms';
      $scope.showTermRule = true;
      $rootScope.$broadcast('updateTermRule',$scope.profileTree[$scope.currentProfile].termRules,$scope.currentProfile,$scope.profileTree[$scope.currentProfile].id);
    break;

我面临的问题是当我在子控制器中使用 ng-if 时，比如 TermRuleController，它无法捕获来自父控制器的广播事件。根据我的理解，这是因为当我广播事件时 div 添加控制器的元素没有被添加到 DOM。我用 ng-show 尝试过同样的事情。它正在工作，但加载页面需要很长时间。有人可以建议添加部分视图和控制器的正确方法。经过一些研究，我发现我可以使用指令而不是使用 ng-include。我还不确定。另外我想写服务而不是广播可能会解决问题，但我的问题是，添加具有不同控制器的部分视图是否正确？

Answer 1

使用 ngInclude 将模板拆分为部分模板时需要牢记。不是将控制器应用于布局模板中的元素，而是将控制器应用于部分中的元素。这样你就不需要以其父级的范围为目标，按范围将控制器耦合在一起。这是一个例子：Layout.html

<div ng-controller="LoginCtrl">
    <div ng-include="login.html"></div>
</div>

Login.html :

<form-field ng-field-data="{{login.usr_name}}"></form-field>
<form-field ng-field-data="{{login.password}}"></form-field>

In the case above, you would want to handle the login model in the LoginCtrl controller, but the scope of the login partial login.html will be one step deeper. Instead, define the controller on the same level as the partial (see below).

Layout.html: <div ng-include="login.html"></div> Login.html:

<div ng-controller="LoginCtrl">
    <form-field ng-field-data="{{login.usr_name}}"></form-field>
    <form-field ng-field-data="{{login.password}}"></form-field>
</div>

因此，这样父子控制器的$scope 就相同了。因此，在您的情况下，您不必广播事件，它可以直接在子控制器中使用。

希望本文能帮助您解决所遇到的问题。

在 angular 应用中添加部分视图和控制器

Adding partial views and controller in angular app

angularjs

angularjs-ng-include