2

我有一个控制器“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 工厂处理了这个问题......

4

2 回答 2

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。这样，当创建、更新或删除联系人时，您可以通过以下几种方式自行处理：

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

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

于 2015-02-16T21:12:32.807 回答
1

我用 $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';     
 };
于 2015-02-16T22:42:11.570 回答