如何使用angularjs從html中調用自定義函數？

我想定義我js控制器中的單獨的方法如下：如何使用angularjs從html中調用自定義函數？

angular.module('test').controller('mycontroller', mycontroller); 
    function mycontroller() { 
     //do sth 
    }; 

    function test(value) { 
     console.log(value); //this is never written 
    };

這樣我有一個乾淨的結構，並在其自己的塊分離的每個方法。

但是，當我嘗試使用它如下，沒有輸出。

<div ng-controller='mycontroller'> 
    {{test('printme')}} 
</div>

爲什麼？

來源

2015-12-01 membersound

當設置爲myController的控制器使用，適用範圍被綁定到組件。此範圍中不存在'test'。因此，你最好把'function test（value）{}'放到一個作用域變量上，比如說'$ scope.test'。 –

http://plnkr.co/edit/tYYvssVWUfvHyXE8ilD8?p=preview –

如果你想保持你的文件找乾淨的，你可以按照約翰爸爸的風格指南：https://github.com/johnpapa/angular-styleguide

這裏是我定你的問題，應用乾淨的方法吧：http://plnkr.co/edit/tYYvssVWUfvHyXE8ilD8?p=preview

angular.module('testApp', []) 
    .controller('ctrl', ctrl); 

function ctrl($scope) { 
    /* -- Public Properties & Methods -- */ 

    $scope.test = test; 


    /* -- Private Properties & Methods -- */ 

    function test(value) { 
    console.log(value); 
    } 
}

因爲我的代碼是在IIFE，你其實可以有一個的function test任何地方內部的塊，而不是控制器功能裏面：

angular.module('testApp', []) 
    .controller('ctrl', ctrl); 

function ctrl($scope) { 
    /* -- Public Properties & Methods -- */ 

    $scope.test = test; 
} 

/* -- Private Properties & Methods -- */ 
function test(value) { 
    console.log(value); 
}

http://plnkr.co/edit/VXbOuOvHaIhRFBVZD16p?p=preview

我剛做了一個按照第二種方式考慮這樣做。相當多的時候我們創建了我們希望綁定到DOM的變量：$scope.showOptions。如果我們擁有控制器以外的功能，我們將無法訪問此$scope.showOptions，因此您將難以進行詢問。通過函數參數請求變量/作用域，可以輕鬆解決此問題。或者創建一個小包裝函數，將派發出來（幾乎像雙派遣）。

$scope.test = function test() { testImpl($scope.showOptions); }; 

function testImpl(showOptions) { 
    console.log(showOptions); 
}

這將讓你保持所有主繁重的控制器之外，但也引入了複雜性的一個新層，其中一個我知道我一定能做到沒有。

所以選擇是你的。

來源

2015-12-01 11:35:52

這可能是我在找的東西。 – membersound

@membersound查看編輯 –

嘗試把你的測試功能的控制器內，並將其更改爲

$scope.test = function(value){ 
    console.log(value) 
};

而且加$範圍依賴於你的控制器

來源

2015-12-01 11:32:01

這很有效。但是，是否還有一種方法可以在控制器功能之外定義功能塊，並將該功能的引用設置爲範圍？ – membersound

如何使用angularjs從html中調用自定義函數？

回答

相關問題