如何使用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中调用自定义函数？

回答

相关问题