如何从角度上的控制器调用指令的功能

我有一个控制个性化多选的指令。有时从主控制器我想清除所有多选。我有多选值填充“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变量传递给指令，并且不发生替代，例如：$ scope.userMultiselectController，$ scope.vehicleMultiselectController –

最佳解决方案和角度方式 - 使用事件。下面的答案是最简单的解决方案，而不是最好的解决方案，如果你想调用一个指令的许多方法，例如map指令，那么你有很多性能问题。所以广播不是解决方案，这是最简单的解决方案 –

如何从角度上的控制器调用指令的功能

回答

相关问题