ng-include 模板变量在 $scope.$watch 上没有改变（没有按钮触发器）？答案

【问题标题】：ng-include template variable not changing on $scope.$watch (no button trigger)?ng-include 模板变量在 $scope.$watch 上没有改变（没有按钮触发器）？
【发布时间】：2015-04-17 11:47:49
【问题描述】：

我有一个控制器“AController”，它有一个模板变量 $scope.tpl.partialtemplate1 = 'initialcontactlist.html'。

'AController' 基本上负责整个页面，'mainpage.html'，我们有

<div ng-include="tpl.partialtemplate1"></div>

在“mainpage.html”上，有一个添加联系人的表单。此表单不是“partialtemplate1”视图的一部分。

提交表单后，我希望将“partialtemplate1”的 HTML 视图重置为初始页面加载时的状态，因为它将重新加载最新的联系人列表。

我尝试过在每个新联系人成功添加后增加一个变量，然后监视该变量并更改部分模板变量。

例如，在“AController”中：

  $scope.tpl = {};
  $scope.contactcount = 0;
  $scope.contactsignupdata = new Contact();
  $scope.tpl.partialtemplate1 = 'initialcontactlist.html';
  $scope.successmessage = null;


$scope.addcontact = function() {
  $scope.contactsignupdata.$save();

        $scope.successmessage = 'Saved!';

        $scope.contactsignupdata = new Contact();
        $scope.contactcount = $scope.contactcount + 1;
};

 $scope.$watch('contactcount', function(newValue, oldValue) {
         $scope.$apply(function() {
             $scope.tpl.partialtemplate1 = null;
             $scope.tpl.partialtemplate1 = 'initialcontactlist.html';
         });
    /*$scope.partialtemplate1 = 'projecttasklists.html';*/

    });

为什么部分模板变量没有改变？是的，每次都会成功保存联系人 - 我使用 Rails 工厂处理了这一点......

【问题讨论】：

标签： angularjs angularjs-scope angularjs-ng-include angularjs-watch

【解决方案1】：

您的代码将partialtemplate1 设置为null，然后直接返回'initialcontactlist.html'。就 Angular 而言，没有任何改变。不支持真正的绑定意味着仅仅因为您更改了 partialtemplate1，并不意味着它会立即发生或触发任何特殊事件。对于这种特定情况，您必须将 partialtemplate1 设置为 null，设置一个计时器，然后触发更改回 'initialcontactlist.html'

我不建议这样做

   $scope.$watch('contactcount', function(newValue, oldValue) {
         $scope.$apply(function() {
             $scope.tpl.partialtemplate1 = null;

             $timeout(function() {
                 $scope.tpl.partialtemplate1 = 'initialcontactlist.html';
             }, 1000);
         });

    });

我强烈推荐

为您可以查询的联系人创建 API。这样，当创建、更新或删除联系人时，您可以通过以下几种方式自行处理：

您可以在每次发生变化时重新查询数据源
如果API返回与变更相关的数据，则无需重新查询

您应该考虑创建 Angular 服务和/或工厂来处理这个问题。事实上，如果它是一个使用$resource 的真正的 REST API，它很容易实现。如果不是 RESTful 资源，可以使用$http 进行自定义查询

【讨论】：

我实际上确实使用了 $resource 并拥有一个适当的工厂等。问题是我的表单位于页面的不同部分，而不是 ng-include 涵盖的部分。在我的 ng-include 模板中，我确实有另一个 ng-include 模板，可以通过单击按钮进行修改。我刚试了你说的，得到：Error: [$rootScope:inprog] $digest already in progress
可能需要更长的计时器时间。或者在我没有看到的某个地方存在无限循环。无论哪种方式，我都不建议这种解决方案。您需要考虑重构您的应用程序和代码。是否需要 ng-include？你需要另一个控制器来控制这个小节吗？为服务提取更多逻辑？
我确实以另一种方式解决了这个问题。我使用了 $emit。我将展示我的解决方案。

【解决方案2】：

我用 $emit 解决了这个问题。

在 HTML 文件中，按下“添加联系人”表单的提交按钮后，会触发两个事件（由撇号按钮分隔）。

ng-click="addcontact(contactsignupdata.name);$emit('MyEvent')"
</form>
{{successmessage}}

在控制器文件中：

    $scope.successmessage = null;
    $scope.tpl = {};
    $scope.tpl.partialtemplate1 = 'initialcontactlist.html';     

   $scope.addcontact = function(value) {
    $scope.contactsignupdata.$save();

    $scope.successmessage = 'Saved ' + $scope.contactsignupdata.name;

    $scope.contactsignupdata = new Contact();
    };

   $scope.$on('MyEvent', function() {
    $scope.tpl.partialtemplate1 = null;

    $scope.resettofullcontactslist($scope.tpl.partialtemplate1);


});

 $scope.resettofullcontactslist = function(value) {
      $scope.tpl.partialtemplate1 = 'initialcontactlist.html';     
 };

【讨论】：