Question

我是Angularjs的新手。我想知道我做错了什么。

我有一个元素数组，由子指令使用。在父控制器中，如果我尝试将数组设置为空，则它不会反映更改，但如果我在该数组上进行拼接，则它可以工作。

$scope.a = [] // does not work
$scope.a.splice(1,1) // works

我甚至试图触发 $apply ，但它无效。

任何人都可以提供帮助。

由于

Answer 1

在子范围创建期间，从父范围到子范围的数据通过链接传输，没有绑定。因此，当您更改$scope.a的值时，子范围仍然引用旧值。

有多种方法可以解决这个问题，但主要思想是通过某个容器引用父级的属性。例如。将您的孩子a替换为container.a，将父母$scope.a = []替换为$scope.container = {a:[]}。也请尽可能考虑使用controllerAs用法而不是此类容器。

Answer 2

如果我理解你的问题，这应该是你想要的。

(function() {
  
  function testDirective() {
    return {
      restrict: 'A',
      template: '<div ng-repeat="smartphone in smartphones">{{ smartphone.brand }}</div>',
      replace: true,
      scope: {
        smartphones: '=smartphones'
      }
    };
  }
  
  function mainController($scope) {
    $scope.smartphones = [
      { brand: 'Apple', model: 'iPhone 4S', price: '999' },
      { brand: 'Samsung', model: 'SIII', price: '888' },
      { brand: 'LG', model: 'Optimus', price: '777' },
      { brand: 'htc', model: 'Desire', price: '666' },
      { brand: 'Nokia', model: 'N9', price: '555' }
    ];
    
    $scope.remove = function() {
      $scope.smartphones = [];
    }
    
    $scope.splice = function() {
      $scope.smartphones.splice(0,1);
      console.log("splice");
    }
  }
  
  angular.module('app', [])
    .directive('test', testDirective)
    .controller('mainController', mainController);
  
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="mainController">
  <button ng-click="remove()">Remove</button>
  <button ng-click="splice()">Splice</button>
  <div class="row">
    <div test smartphones="smartphones"></div>
  </div>
</div>

如果这与您所追求的不同，请提供更多细节，以便我可以更改代码。

Angularjs变化不显示

2 个答案: