Question

我正在优化Angular app的性能。我正在使用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”变量设为true并按如下方式广播事件

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而不是使用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>

在上面的例子中，您可能希望处理登录模型 LoginCtrl控制器，但登录部分login.html的范围将更进一步。相反，在同一个上定义控制器作为部分的水平（见下文）。

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>

因此，通过这种方式，父和子控制器的$范围将是相同的。因此，在您的情况下，您不必广播事件，它将直接在子控制器中可用。

希望，这篇文章可以帮助您摆脱遇到的问题。

在角度应用

1 个答案: