Question

我有自定义指令，并希望将一些参数（对象）发送到此指令。

在指令中我根据其中一个参数选择了列表，我需要遵循这个参数。

我的指示：

<custom-directive rows="users">

</custom-directive>

和模板：

<ui-select ng-model="value">
    <ui-select-match allow-clear="true">
        {{$select.selected}}
    </ui-select-match>
    <ui-select-choices repeat="row in rows | filter: $select.search">
        <div>
            <span ng-bind-html="row | highlight: $select.search"></span>
        </div>
    </ui-select-choices>
</ui-select>

通常如果行更改ui-select将自动更新选择列表。但是如果行是从该指令外部变量的，那么它就不会。

我可以在指令外部和内部使用相同的变量吗？

我想我可以使用ng-model，但我不确定它是不是很好的解决方案。

编辑：我的指令代码：

.directive('custom-directive', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            rows: '='
        },
        templateUrl: 'template.html',
        controller: ['$scope', function($scope) {
            console.log($scope);
        }]
    };
})

Answer 1

您可以使用链接而不是控制器来处理行的功能。设置行：'='应该已经处理双向绑定。

.directive('custom-directive', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
           rows: '='
        },
        templateUrl: 'template.html',
        link: function(scope, element, attr) {
            console.log(scope.rows);
        };
    };
})

编辑：

将监视添加到您在外部更改时执行行为所需的值。

.directive('custom-directive', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
           rows: '='
        },
        templateUrl: 'template.html',
        link: function(scope, element, attr) {
            scope.$watch('rows', function(oldValue, newValue) {
                console.log('This is the newValue : ' + newValue);
            };
        };
    };
})

Answer 2

您可以通过以下方式修改自定义指令以使用ng-model：

directive('customDirective', function() {
  return {
    // ...
    require: '?ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModel) {
      if (!ngModel) return;              

      // Write data to the model
      // Call it when necessary
      scope.setValue = function(value) {
        ngModel.$setViewValue(value);
      }
    }
  };
});

可以使用该方法检索ng-model值的初始状态：

ngModel.$render = function() {
    var value = ngModel.$viewValue || [];
};

AngularJS - 遵循自定义指令

2 个答案: