AngularJs - 从指令调用控制器函数

Question

在 angularjs 项目中，我使用指令通过将文件拖放到 dropzone 中来上传文件。在指令中，我需要调用在我的控制器中定义的函数。

这是我正在做的事情：

(function () {
'use strict';

angular
    .module('app')
    .controller('myController', myController)
    .directive('fileDropzone', function () {
        return {
            restrict: 'A',
            scope: {
                file: '=',
                fileName: '=',
                test: '&callbackFn',
            },
            link: function (scope, element, attrs) {
                var  processDragOverOrEnter;
                processDragOverOrEnter = function (event) {
                    if (event != null) {
                        event.preventDefault();
                    }
                    event.dataTransfer.effectAllowed = 'copy';
                    return false;
                };
                element.bind('dragover', processDragOverOrEnter);
                element.bind('dragenter', processDragOverOrEnter);
                return element.bind('drop', function (event) {
                    var file, reader;
                    if (event != null) {
                        event.preventDefault();
                    }
                    reader = new FileReader();
                    reader.onload = function (evt) {
                        console.log(reader.result);

                        scope.test({});
                    };
                    file = event.dataTransfer.files[0];
                    reader.readAsText(file);
                    return false;
                });
            }
        };
    });

    function myController()
    {
         var vm = this;

         vm.test = function () {
           console.log("It works !");
         };
    }
})();

html 文件：

<div class="container">
    <md-content file-dropzone layout="column" layout-align="center center" class="md-list-item-text" md-whiteframe="1" style="padding:1em;margin:0.5em 0.5em;" flex>
        File drop zone
    </md-content>
</div>

虽然 console.log(reader.result) 指令确实在控制台中显示文件内容，但消息“It works !”没有显示，这意味着函数 test() 永远不会被调用。

我做错了什么？

Answer 1

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

app.controller("Ctrl", function ($scope) {
  $scope.test = function () {
   console.log("Hi you called ctrl function");
  };
  $scope.param = function(name){
  console.log("My name is " + name);
  }
  $scope.testing = function(role){
  console.log("I'm a "+ role);
  }
});

app.directive("testDir", function () {
  return {
    scope: {
      test: "&callFuc",
      param:"&withparam",
      testing:"&"
    },
    template: `<button ng-click="test()">Call Test!
               </button>
               <button ng-click="param({name:'Mani'})">With param!
               </button>
               <button ng-click="clickHere()">Click Me!
               </button>`,
    link:function(scope){
        scope.clickHere = function(){
            scope.testing({msg:"Javascript Developer"});
        };
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="exApp">
  <div ng-controller="Ctrl">
    <div test-dir call-fuc="test()" withparam="param(name)" testing="testing(msg)"></div>
  </div>
</div>

本例无参数；

   scope: {
                file: '=',
                fileName: '=',
                test: '&',
            }

<a ng-click="test()">Call test</a> // in directive

<md-content file-dropzone layout="column" test="vm.test()"
            layout-align="center center" class="md-list-item-text"
            md-whiteframe="1" style="padding:1em;margin:0.5em 0.5em;" 
            flex>
   File drop zone
</md-content>

Answer 2

您可以通过在链接函数中指定第四个变量来访问指令控制器。

更新链接功能：-

link: function (scope, element, attrs, ctrl) {
  console.log(ctrl.test());
}

Answer 3

您需要将 ctrl 作为第四个参数传递给 link 函数。