AngularJs - 從指令

調用控制器函數在一個angularjs項目中，我使用一個指令來上傳文件，方法是將它們拖放到一個dropzone中。在指令中，我需要調用在我的控制器中定義的函數。AngularJs - 從指令

下面是我在做什麼：

(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）指令確實顯示在控制檯中的文件內容，消息「有用！」沒有顯示，這意味着函數test（）永遠不會被調用。

我在做什麼錯？

來源

2017-05-29 Hal

添加HTML文件信息也.. –

爲您創建隔離範圍，然後在那裏你使用任何控制器的內部指令，在那裏你會得到它的實例使用''CTRL作爲第四個參數鏈接功能 –

然後你可以調用控制器的功能 –

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>

來源

2017-05-29 10:11:02

經過進一步測試，這是唯一對我有用的解決方案，謝謝。 – Hal

歡迎@Hal ... –

-1

您可以通過在鏈接功能中指定第四個變量來訪問指令控制器。

更新的鏈接功能： -

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

來源

2017-05-29 09:53:42 Ajay

請在downvoting答案前添加評論。這將有助於在未來的答案 – Ajay

我沒有downvoted的答案，但它不適合我。我有以下錯誤：「無法讀取未定義的屬性」測試「。如果我嘗試在控制檯中顯示ctrl，它確實顯示「未定義」。 – Hal

@Hal，我問那些壓倒這個答案的人。你可以將myController註冊爲指令控制器嗎？ – Ajay

-1

你需要傳遞CTRL作爲第四個參數裏面鏈接功能。

來源

2017-05-29 09:56:41

AngularJs - 從指令

回答

相關問題