Question

希望得到一个简单的用例示例。

我有以下指令，

angular.module('aahBreakdownLocationMapModule', ['aahBreakdownLocationMapControllerModule']).directive('aahBreakdownLocationMap', [function aahBreakdownLocationMap() {
    return {
        restrict: 'E',
        templateUrl: 'src/app/components/breakdown-location-map/breakdown-location-map.template.html',
        scope: {
            taskid: '='
        },
        controller: 'BreakdownLocationMapController',
        controllerAs: 'ctrl',
        bindToController: true
    };
}]);

由于taskid被此指令外部的某些内容所改变，我该如何关注它？

示例，当taskid更改时，我需要从服务器获取所述任务的当前位置，因此需要使用新的taskid作为参数调用我们的API之一，我实际上并没有在指令中显示taskid。

最好的方法是什么，因为我显然没有$scope.$watch可用（或者至少，我不希望它可用）

注意：我使用的是1.3

TIA

Answer 1

实际上，您需要的是scope.$watch。您可以获得范围，然后能够$watch使用link函数为其指令建立模型：

return {
    restrict: 'E',
    templateUrl: …
    …
    link: function (scope) {
        scope.$watch('taskid', function(newVal, oldVal) {
            // retrieve new data
        });
    }
};

Answer 2

angulyar没有给我们很多选择来跟踪变化：

您可以在控制器内使用$ watch

$scope.$watch('ctrl.taskid', function(newVal, oldVal) {
        // retrieve new data
});

或者你需要使用将taskid传递给指令控制器的服务。

但我更喜欢使用$ watch。

Answer 3

$ watch的第一个参数接受一个可以返回特定视图模型的函数（controllerAs别名绑定）属性：

$scope.$watch(
   function() { return ctrl.taskid; },
   function(newVal, oldVal) {
       // ...
   });

修改

使用controllerAs + bindToController的一个好处是，您不需要使用$ scope手动将隔离的范围参数绑定到视图模型，但是在监视绑定更改方面只有两种真实的方法：

使用$ watch

监控控件上的更改，首先更改值，例如对正在更改值的输入使用ng-change，然后调用回调或广播事件。

绑定到控制器的Angular指令

3 个答案: