Question

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

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

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

在'mainpage.html'上，有一个表单可添加联系人。此表单不属于'partialtemplate1'的观点。

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

我尝试过在成功添加每个新联系人之后递增变量，然后监视该变量并更改partialtemplate变量。

例如，在'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';*/

    });

为什么partialtemplate变量没有改变？是的，每次都成功保存联系人 - 我在Rails工厂处理了这个......

Answer 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 Services和/或Factories来处理这个问题。事实上，如果它是使用$resource的真正REST API，则很容易实现。如果它不是RESTful资源，则可以使用$http进行自定义查询

Answer 2

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

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

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';     
 };

ng-include模板变量在$ scope上没有变化。$ watch（没有按钮触发器）？

2 个答案: