Как вызвать директивную функцию от контроллера?

Question

Я пытаюсь создать простую директиву загрузки, которую я могу использовать снова и снова, но, похоже, я не работаю. У меня есть следующий код.

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

 
river.directive('riverLoading', function() { 
 
    return { 
 
    restrict: 'E', 
 
    template: '<div class="text-center" style="padding-bottom: 20px;" ng-show="loading">' + 
 
    '<i class="fa fa-fw fa-refresh fa-spin" style="margin-right: 5px;"></i> {{ message }} {{ loading }}' + 
 
    '</div>', 
 
    scope: { 
 
     acessor: '=', 
 
     message: '@' 
 
    }, 
 
    controller: function ($scope) { 
 
     $scope.loading = true; 
 
     
 
     $scope.finished = function() { 
 
     $scope.loading = false; 
 
     }; 
 
    } 
 
    } 
 
}); 
 

 
river.controller('ClientController', function($scope) { 
 
    // This is in an $http.finished. 
 
    // $scope.loadingClients.finished(); // This does not work (why?) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="river" ng-controller="ClientController"> 
 

 
<river-loading acessor="loadingClients" message="Loading clients.."></river-loading> 
 
    
 
</div>

Как я могу получить эту работу и что я делаю не так? Я вижу другие примеры, которые делают то же самое, и они работают. Но они обычно не имеют изолированного пространства и просто называют $ scope.finished() ;.

Большое спасибо за ваше время и помощь!

Answer 1

Очень странно, что вы делаете, поскольку вы можете просто использовать двустороннюю привязку. Тем не менее, я думаю, ваша проблема в том, что вам нужен finished функцию, чтобы быть:.

$scope.acessor.finished = function() { 
    $scope.loading = false; 
}; 

т.е. вы хотите связать finished функцию на ссылки, которые вы прошли в Тем не менее, было бы гораздо проще просто есть шаблон в вашей директиве, чтобы выглядеть следующим образом:

template: '<div class="text-center" style="padding-bottom: 20px;" ng-show="loading.show">' + 
'<i class="fa fa-fw fa-refresh fa-spin" style="margin-right: 5px;"></i> {{ message }} {{ loading }}' + 
'</div>', 

Удалить контроллер из директивы, и ваш ClientController становится:

river.controller('ClientController', function($scope) { 
    $scope.loading = {show: true} 
    // This is in an $http.finished. 
    // $scope.loadingClients.finished(); // This does not work (why?) 
    $scope.loading.show = false 
}); 

Таким образом вы можете использовать двухстороннюю привязку данных.

Я бы также прочитал, используя точку ('.') В своих областях, так как иначе вы столкнетесь с проблемой затенения объекта Javascript. См. here.