Question

我有两组数组。第一组是默认值。当用户点击下一个按钮时，我需要更新新的设置。我可以这样做。

但前一组也存在。我不知道如何正确删除它，并定义新值。我正在寻找在移除event listner时删除DOM的方式。和内存泄漏不应该一样。

这是我的js：

var myApp = angular.module('myApp', []);

myApp.controller('main', function ($scope) {

  $scope.values = [{"name":"one", "num" : 1}, {"name":"two", "num" : 2}, {"name":"three", "num" : 3}];

  $scope.next = function () {
    $scope.index = 4;
    $scope.values = [{"name":"four", "num" : 4}, {"name":"five", "num" : 5}, {"name":"six", "num" : 6}];

  }

  $scope.index = 0;

  $scope.update = function (value) {
    console.log("clicked " + value.num);
    $scope.index = value.num;
    $scope.$apply();
  }

});

myApp.directive("newArray", function ($compile) {

  return {

    scope : {
      value : "=",
      index : "=",
      update:"&"
    },

    link : function (scope, element, attrs) {

      var getTemplate = function (value, index) {

        switch(index) {

          case 0 :
            return '<div ng-click="update()">I am here {{index}} {{value.name}}</div>'
            break;

            case 1 :
            return $('<div />', {
              class:'blue',
              html : "<h1>testing{{index}} {{value.name}}</h1>",
              click : function () {
                scope.update({num: scope.value.num});
              }
            });
            break;

            case 2 :
            return $('<div />', {
              class:'green',
              html : "<h1>testing{{index}} {{value.name}}</h1>",
              click : function () {
                scope.update({num: scope.value.num});
              }
            });
            break;

        }

      }

      element.html(getTemplate(scope.value, scope.index));
      $compile(element.contents())(scope);
      element.replaceWith(element.contents());

    }

  }

});

Live Demo

更新我的plnkr表示赞赏。可能有助于我将来的参考。

Answer 1

对于这样一个不同的要求，我不会选择会搞乱的隔离范围指令，因为你想使用替换指令DOM和指令模板。你在你的指令上使用ng-repeat的另一个原因是你没有以正确的方式维护DOM结构，因为你正在用新构造的DOM替换指令DOM。而不是我创建一个简单的指令，在指令内循环并创建一个具有新的隔离范围的元素＆amp;将它附加到观察者内部的伪元素。

<强>标记

<body ng-controller="main">
   <a ng-click="next()" href="#">Next</a>
   <h1>{{index}}</h1>
   <new-array values='values'></new-array>
</body>

<强>指令

myApp.directive("newArray", function ($compile) {
  return {
    link : function (scope, element, attrs) {
      var getTemplate = function (value, index) {
        var newScope = scope.$new(true);
        newScope.value = value;
        switch(index) {
          case 0 :
            newScope.index = index;
            return  $compile('<div ng-click="$parent.update(value)">I am here {{value.num}} {{value.name}}</div>')(newScope)
            break;
            case 1 :
            return $compile($('<div />', {
              class:'blue',
              html : "<h1>testing{{index}} {{value.name}}</h1>",
              click : function () {
                scope.update({num: scope.values[index].num});
              }
            }))(newScope);
            break;
            case 2 :
            return $compile($('<div />', {
              class:'green',
              html : "<h1>testing{{index}} {{value.name}}</h1>",
              click : function () {
                scope.update({num: scope.values[index].num});
              }
            }))(newScope);
            break;
        }
      }
      scope.$watch('values', function(newVal){
        var html = '', dom = $('<div/>');
        element.empty();
        for(var i=0;i < newVal.length; i++){
          element.append(getTemplate(newVal[i], i))
        }
        //element.replaceWith(dom)
      }, true);
    }
  }
})

Working Plunkr

注意

在你的情况下，你真的不能想到$ destroy。它就像曾用于清除事件的destructor。

如何`$ destroy`指令并替换为新值

1 个答案: