使用隔离范围时从指令调用控制器的功能？答案

【问题标题】：Calling function of controller from directive when using isolated scope?使用隔离范围时从指令调用控制器的功能？
【发布时间】：2018-08-28 12:14:32
【问题描述】：

我想从Directive调用Controller的一个函数，它是为了验证。但是当我使用隔离范围时，我对如何从指令中调用它有点困惑。这是指令的代码：-

App.directive('test',function(){
    return{
    require: "ngModel",
     scope:{
         a:"=",
         b:"=",
         c:'=',
         d:'='
            },
         link: function(scope, element, attributes,modelVal )
            {
            modelVal.$validators.test= function(val)
              {
                return false;
               //isolated scope values will make if condition true or false.
               if(scope.a=="true"){
                //I need to call a function of controller here. But how can 
                //i call that function from directive? this is my problem
                         } 
               }
             scope.$watch("a", function()
               {
                    modelVal.$validate();
                });

         }//end of link function;
      }//end of return;
});//end of directive;

Function 在我的controller 中，我想我不需要写controller code。在我的 html 中，我将此指令称为：

     <test a="1" b="2" c="3" d="4" ng-model="abc"></test>

我需要在我的directive 中进行哪些更改才能调用controller function，即$scope.testFunction()？

【问题讨论】：

标签： angularjs angularjs-scope angular-directive isolated-scope

【解决方案1】：

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

module.controller('TestController', function($scope){
  $scope.text = 'test';
  
  // Will be invoked from 'test' directive
  $scope.alertMe = function(text){
    alert(text);
  };
});

module.directive('test', function(){
  return {
    restrict: 'E',
    template: '<input ng-model="text" ng-change="onChange(text)" />',
    scope: {
      text: '='
    },
    link: function(scope, elem, attr){
      scope.onChange = function(text){
      
      // Invoking parent controller function
       scope.$parent.alertMe(text);
      }
    }
  }
})

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myModule" ng-controller="TestController">
 
<test text="text"></test>

</div>
</body>
</html>

【讨论】：

【解决方案2】：

我已经给了一个样品，你可以这样试试。

控制器：

module.controller('TestController', function($scope){
  $scope.onTextChange = function(text){
    alert(text);
  };
})

HTML：

<test my-func="onTextChange(text)"></test>

指令：

module.directive('test', function(){
  return {
    restrict: 'E',
    template: '<input ng-model="text" ng-change="onChange(text)" />',
    scope: {
      myFunc: '&'
    },
    link: function(scope, elem, attr){
      scope.onChange = function(text){
        if(typeof scope.myFunc === 'function'){
          // Calling the parent controller function
          scope.myFunc({text: text});
        }
      }
    }
  }
})

【讨论】：

我已经有了这个解决方案，这不是我想要的，我想在一个指令中使用isolated和crtl范围，你可以称之为混合范围。
我相信，根据需要，您可以使用 Isolated scope 或 Controller scope 之一。我真的很想知道您所说的 'mix scope' 是什么意思。你能详细说明一下这个用例吗？您还在您的问题中指定了指令中使用了隔离范围:-)
你能看看我的代码吗？我在使用comments 的指令中告诉我，我正在使用isolated scope，但我需要从该指令中的控制器调用一个函数。我不包括任何template。告诉我，我该怎么做在控制器中调用该函数，记住我没有使用任何event listener，如ng-click 或ng-change。 isolate scope 将决定我是否应该调用该函数。将其视为 if 情况，即 if 条件是孤立的范围值，如果为 true，则从控制器调用函数。谢谢@santhoshV
@ashan ayub 我们有一个选项bindToController: true 将作用域指向父控制器。但是您不能同时使用scope:{a: "="} 和bindToController: true。您可以从指令中尝试一种技巧 scope.$parent.testFunction()。
感谢您的解释。你能通过创建一个小例子来解释这个技巧并将其作为答案发布吗？这将非常有帮助，并且在创建它时也要记住我的代码。谢谢