AngularJs - 从指令调用控制器函数 [英] AngularJs - Calling controller function from directive

问题描述

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

这是我在做什么:

(函数(){'使用严格';有角的.module('应用').controller('myController', myController).directive('fileDropzone', function () {返回 {限制:'A'，范围: {文件:'='，文件名: '=',测试:'&callbackFn'，},链接:函数(范围、元素、属性){var processDragOverOrEnter;processDragOverOrEnter = 函数(事件){如果(事件！= null){event.preventDefault();}event.dataTransfer.effectAllowed = '复制';返回假；};element.bind('dragover', processDragOverOrEnter);element.bind('dragenter', processDragOverOrEnter);return element.bind('drop', function (event) {var 文件，阅读器；如果(事件！= null){event.preventDefault();}reader = new FileReader();reader.onload = 函数(evt){控制台.日志(读者.结果)；范围.test({});};file = event.dataTransfer.files[0];reader.readAsText(文件)；返回假；});}};});函数 myController(){var vm = 这个；vm.test = 函数 () {console.log("成功了！");};}})();

html 文件:

<md-content file-dropzone layout="column" layout-align="center center" class="md-list-item-text" md-whiteframe="1" style="padding:1em;margin:0.5em0.5em;"弹性>文件拖放区</md-content>

虽然 console.log(reader.result) 指令确实在控制台中显示文件内容，但消息It works！"未显示，这意味着函数 test() 从未被调用.

我做错了什么?

解决方案

var app = angular.module('exApp', []);app.controller("Ctrl", function ($scope) {$scope.test = 函数 () {console.log("你调用了 ctrl 函数");};$scope.param = 函数(名称){console.log("我的名字是" + name);}$scope.testing = 函数(角色){console.log("我是"+角色);}});app.directive("testDir", function () {返回 {范围: {测试:&callFuc"，参数:"&withparam",测试:"&"},模板:`<button ng-click="test()">调用测试！<button ng-click="param({name:'Mani'})">带参数！<button ng-click="clickHere()">点击我！</按钮>`,链接:功能(范围){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>

这个例子没有参数；

 范围:{文件:'='，文件名: '=',测试:'&',}

 调用测试//在指令中<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;"弹性>文件拖放区</md-content>

In an angularjs project I am using a directive to upload files by drag/dropping them in a dropzone. In the directive I need to call a function that is defined within my controller.

Here is what I am doing:

(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 file:

<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>

While the console.log(reader.result) instruction does display the file content in the console, the message "It works !" is not shown, which means the function test() is never called.

What am I doing wrong ?

解决方案

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>

This example is without parameter;

   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>

这篇关于AngularJs - 从指令调用控制器函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！