javascript - AngularJS:当变量变为指令时触发 Controller 函数

Question

我有一个指令要做两件事:(i) 它管理 HTML 中某些选项卡的可视化，(ii) 它$watches session 存储中的对象 myObj 并将该对象保存在名为 myData 的变量中。这是代码:

.directive('panelManager', function(){
    return {
        restrict: 'E',
        templateUrl: 'foo.html',

        controller: ['$scope', '$window',  function($scope, $window) {
            pn = this;
            pn.tab = 1; // init

            this.selectTab = function(setTab) {
                pn.tab = setTab;
            };

            this.isSelected = function(checkTab) {
                return pn.tab === checkTab;
            };

            $scope.$watch(function () {
                return $window.sessionStorage.getItem('myObj');
            }, function (value) {
                pn.myData = JSON.parse(value);
            });
        }],
        controllerAs: 'panels'
    };
})

我有一个 Controller 来调用 WS，每次更改时都会传递上述 myData 的属性 foo。这是:

.controller('MyDataController', ['$http', function($http) {

    pdc = this;
    pdc.myResultset = [];

    pdc.getDetails = function(val) {
        return $http.get("myUrl"+val+"/").then(function(response){
              pdc.myResultset= response.data;
        });
    };
}]);

有没有办法在该 Controller 中触发 getDetails 并在每次 myData 更改值时将 val = MyData.foo 传递给它？ 通过这种方式，我可以将 WS 的当前结果集存储在 myResultset 中，并将其分配给本地范围。

Answer 1

您可以从指令中发出，但您需要关联 Controller 中的 $rootScope 。所以声明变成:

controller: ['$rootScope', '$scope', '$window',  function($rootScope, $scope, $window) {

然后，你可以这样做:

$scope.$watch(function () {
    return $window.sessionStorage.getItem('myObj');
}, function (value) {
    pn.myData = JSON.parse(value);
    $rootScope.$broadcast('valueChanged', pn.myData);
});

在你的 Controller 中:

.controller('MyDataController', ['$http', '$scope', function($http, $scope) {

    pdc = this;
    pdc.myResultset = [];

    pdc.getDetails = function(val) {
        return $http.get("myUrl"+val+"/").then(function(response){
            pdc.myResultset= response.data;
        });
    };

    $scope.$on('valueChanged', function(event, data) {
        pdc.getDetails(data.foo); //pass data.foo to the function
    });
}]);