Question

我正在编写一个指令，它将从数据列表中查找值并始终显示该值。为什么当我单击此plunkr示例中的更改数据按钮时，它不会更改结果？我已经试过了一个$ watch但它只发射一次。

普兰克：http://plnkr.co/edit/9A3z0KMm8EaBNgYv1NmH?p=preview

例如，以下是用法：

<lookup-binder lookup="lookupList" find="data.id" result="lookupList.description"></lookup-binder>

这是指令的样子：

app.directive('lookupBinder', function() {
  return {
    restrict: 'E',
    scope: {
      lookup: '=',
      find: '=',
      result: '='
    },
    controller: function($scope){
      console.log('controller fired');
    },
     link: function(scope, element, attrs, tabsCtrl) {
       console.log('link fired')
       scope.$watch(scope.find, function(newValue, oldValue) {
          console.log('watch fired');

          var el = _.find(scope.lookup, { id: scope.find });
        if(el != null){
          scope.result = el.description;
        }
        });


    },
    template: 'lookup Binder: <br/> lookupList: {{lookup}} <br/> find: {{find}} <br/> result: {{result}} <br/>'
  };
});

控制器：

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

angular.module('app').controller('testController', TestController);

TestController.$inject = ['$scope'];

function TestController($scope) {
    $scope.gradeLevels = [{
        id: '1',
        description: 'kindergarden'
    }, {
        id: '2',
        description: 'first grade'
    }];
    $scope.gradeLevel = {
        gradeLevelID: '1',
        record: 'test1'
    };
    console.info('gradeLevels[0].id = ' + $scope.gradeLevels[0].id);
    console.info('gradeLevel.gradeLevelID = ' + $scope.gradeLevel.gradeLevelID);
}

Answer 1

范围的$watch函数接受字符串或函数，因此将其更改为其中一个：

scope.$watch('find', function(newValue, oldValue) { 
    ...
}

此外，_.random的结果是一个数字，您的ID是字符串，因此将随机数更改为字符串：

$scope.data.id = _.random(1,4).toString();

选中此plunker

在指令中双向绑定，即使在数据再次发生变化后也会触发监视？

1 个答案: