指令中的访问控制器功能答案

【问题标题】：Access controller function from directive指令中的访问控制器功能
【发布时间】：2017-06-27 09:44:15
【问题描述】：

我有一个主控制器：MainCtrl 和其中的一个函数：$scope.ctrlFn

此函数需要一个参数并返回一个与接收到的参数值连接的字符串。

MainCtrl JS：

app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', function ($scope, $http, $log, $timeout) {
      $scope.ctrlFn = function(x) {
          return 'some val'+x;
      };

      var customTemp = '<div ng-repeat="c in grid.appScope.someArray">{{c}}<my-directive url="MODEL_COL_FIELD" vvv="ctrlFn(url)"  /></div>';
      $scope.someArray=['a','b','c'];      
      $scope.gridOptions = {};

      $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
        .success(function(data) {
          $scope.gridOptions.data = data;

        });
      $scope.gridOptions.rowHeight = 50;  
      $scope.gridOptions.columnDefs = [

        { name:'eee' },
        { name:'age'  },
        { name:'address.street'}
      ];
      $scope.gridOptions2 = {};
      $scope.gridOptions2.data =[];
      $scope.gridOptions2.rowHeight =400;
      $scope.gridOptions2.columnDefs =[];

      var timer = function() {
        for (i = 1; i < 100; i++) { 
          $scope.gridOptions2.data.push({
            value:i,
            name:'Name'+i,
            url:'https://dummyimage.com/30x30/000/fff&text='+i,
            image:i
          });

        }

        $scope.gridOptions2.columnDefs =[
          {
            name:'image',
            cellTemplate:customTemp,
            width:100
          },
          {
            name:'name',
            cellTemplate:customTemp,
            width:100
          },
          {
            name:'url',
            width:50
          },
          {
            name:'value'
          }
        ];

      };

      $timeout(timer,0);
      console.log($scope.gridOptions);
      console.log($scope.gridOptions2);
    }]);

我有一个指令：myDirective，它创建一个模板并从父作用域变量和函数启动作用域值并显示它们。我已经设法将作用域变量传递给指令模板，就像作用域 url 一样，但不是值 myValue，这意味着分配从父函数返回的值。

指令myDirective：

app.directive('myDirective', function ($log) {

    return {
        restrict: 'E',
        replace: true,

        scope: {
          url: '=',
          vvv: '&'
        },

        template: '<div ng-init="u=url; myValue=vvv" >{{u}}-{{myValue}}<img  src="https://dummyimage.com/100x100/000/fff&text={{url}}" alt="Smiley face" height="100" width="100"></div>',
        link: function (scope, element, attrs) {

          scope.$watch('url', function(newValue) {
            var url = newValue;
          });
        }
    };
});

这是一个笨蛋： http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview

【问题讨论】：

你想做什么？您想在指令中访问您的 ctrlFn 控制器吗？
是的@KiranPawar

标签： javascript angularjs angularjs-scope angular-directive

【解决方案1】：

要从在ui grid 的表格单元格中呈现的指令模板中访问父范围，您必须通过grid.appScope.variableOrFunction

所以要调用 ctrlFn() 我必须：

grid.appScope.ctrlFn()

工作示例：http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview

【讨论】：