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

У меня есть директива, которая управляет персонализированным мультиселектором. Иногда из главного контроллера я хотел бы очистить все мультиселекты. У меня есть значение multiselect, заполняющее двунаправленную переменную «filter», и я могу удалить контент оттуда, но при этом мне также нужно изменить некоторые стили и другой контент. Другими словами: я должен вызвать метод, принадлежащий директиве, от кнопки, принадлежащей контроллеру. Это даже с этим Возможным структуру данных ?:Как вызвать функцию директивы от контроллера на угловом

(Кстати, я нашел другие вопросы и примеры, но их указания не имеют свои собственные рамок.)

function MultiselectDirective($http, $sce) { 
    return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: 'temp.html', 
     scope: { 
      filter: "=", 
      name: "@", 
      url: "@" 
     }, 
     link: function(scope, element, attrs){ 
      //do stuff 
      scope.function_i_need_to_call = function(){ 
       //updates directtive template styles 
      } 
     } 
    } 
}

источник

2016-02-05 Vandervals

определяют как $ родительской области видимости функции, например:. Объем $ parent.function_i_need_to_call = функция() {..}) внутри директивы, а затем вызывать тот же метод в контроллере с $ объеме. function_i_need_to_call() – saikumar

Вы можете 'scope. $ watch'' filter', а затем вызвать функцию в соответствии с текущим значением. –

@saikumar, но что, если директива работает в нескольких элементах? – Vandervals

лучшее решение и угловой способ - использовать event.

Показательный пример на jsfiddle.

angular.module('ExampleApp', []) 
 
    .controller('ExampleOneController', function($scope) { 
 
    $scope.raise = function(val){ 
 
    \t $scope.$broadcast('raise.event',val); 
 
    }; 
 
    }) 
 
    .controller('ExampleTwoController', function($scope) { 
 
    $scope.raise = function(val){ 
 
    \t $scope.$broadcast('raise.event',val); 
 
    }; 
 
    }) 
 
    .directive('simple', function() { 
 
    return { 
 
     restrict: 'A', 
 
     scope: { 
 
     }, 
 
     link: function(scope) { 
 
     scope.$on('raise.event',function(event,val){ 
 
\t \t \t \t \t console.log('i`m from '+val); 
 
     }); 
 
     } 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleOneController"> 
 
    <h3> 
 
     ExampleOneController 
 
    </h3> 
 
    <form name="ExampleForm" id="ExampleForm"> 
 
     <button ng-click="raise(1)" simple> 
 
     Raise 1 
 
     </button> 
 
     
 
    </form> 
 
    </div> 
 
    <div ng-controller="ExampleTwoController"> 
 
    <h3> 
 
     ExampleTwoController 
 
    </h3> 
 
    <form name="ExampleForm" id="ExampleForm"> 
 
     <button ng-click="raise(2)" simple> 
 
     Raise 2 
 
     </button> 
 
    </form> 
 
    </div> 
 
</body>

источник

2016-02-05 11:36:10

-1

Я думаю, что лучшее решение для связи от контроллера директив это один:

// in directive 

    return { 
     scope: { 
       controller: "=",   
      }, 
     controller: function($scope){ 
     $scope.mode = $scope.controller.mode; 
     $scope.controller.function_i_need_to_call = function(){} 
     $scope.controller.currentState = state; 
     } 
    } 

// in controller 
function testCtrl($scope){ 

    // config directive 
    $scope.multiselectDirectiveController = { 
      mode: 'test', 
    }; 

    // call directive methods 
    $scope.multiselectDirectiveController.function_i_need_to_call(); 

    // get directive property 
    $scope.multiselectDirectiveController.currentState; 
} 

// in template 
<Multiselect-directive controller="multiselectDirectiveController"></Multiselect-directive>

источник

2016-02-05 11:02:55

, если есть несколько экземпляров директивы, эти методы будут переопределять, я боюсь – Vandervals

для нескольких экземпляров из одной директивы таким образом вы передаете переменную $ scope.multiselectDirectiveController в директиву и NO. Завершение происходит, например: $ scope.userMultiselectController, $ scope.vehicleMultiselectController –

Лучшее решение и использование метода углового пути. Ответ ниже - это самое простое решение, не лучшее решение, если вы хотите назвать многие методы одной директивы, например, директивы карты, то у вас много проблем с производительностью. поэтому широковещательная передача не является решением, это самое простое решение –

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

ответ

Смежные вопросы