2

我使用控制器作为方法而不是 $scope。我在从 HTML 调用方法时遇到了一些问题。所以，问题是，在这种方法中，声明和调用函数有多少种方法。

第一：（如果我想先做某事）

var vm= this ; 
vm.dataOne=[];

function funcOne() {
        myService.serviceFunc()
            .then(function (response) {
                vm.dataOne= response.data;
            });
    };
function activate() {
        funcOne();
        }
    activate();

第二：（如果我想根据函数返回值来初始化一个变量） 

 vm.dataTwo = function () {
        doSomeThing();
 }
  • 也有什么办法吗？

  • 应该如何在控制器中定义一个将从 HTML 调用的函数，如

    ng-click = "ctrl.dataTwo()";
4

3 回答 3

4

您定义的函数是私有的：

function functionOne() {

}; // Just function body, no need of semicolon

这些被称为函数声明。目前，它们只能在您的控制器中访问。

为了能够调用它们，请将它们附加到控制器，以便它们成为控制器变量：

vm.functionOne = functionOne;

这种方法的一个优点是您可以在实际调用函数后定义函数，而不是使用$scopeor $this。它们通过提升被识别，并被调用。

关于从函数初始化返回值，只需调用它：

vm.someVariable = someFunction();

一些参考资料：

var functionName = function() {} vs function functionName() {}

JavaScript 中的私有成员

Angular 函数声明、函数表达式和可读代码

角度样式指南

于 2016-05-24T10:49:51.407 回答
0

第一种使用 ng-controller="cntrl as vm" 语法的方法：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .controller('MyCntrl', function($scope) {
       var vm = this;
       vm.name = 'Custom Directive';
   });
</script>
<body>

<div ng-app="MyApp" ng-controller="MyCntrl as vm">
  {{vm.name}}
</div>

</body>
</html>

第二种方式使用 controllerAs 作为指令的属性之一：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .directive('customDir', function() {
       return {
           restrict: 'EA',
           template: '<div>{{vm.name}}</div>',
           controller: function(){
               var vm = this;
               vm.name = 'Custom Directive';
           },
           controllerAs: 'vm'
       } 
   });
</script>
<body>

<div ng-app="MyApp">
  <div custom-dir></div>
</div>

</body>
</html>

使用在控制器中定义但在 html 中调用的“控制器为”语法调用函数的方法：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .controller('MyCntrl', function($scope) {
       var vm = this;
       vm.name = 'Custom Directive';

       vm.someFunction = function() {
         vm.name = 'Button is Clicked!!!';
       };
   });
</script>
<body>

<div ng-app="MyApp" ng-controller="MyCntrl as vm">
 {{vm.name}}
 <input type='button' ng-click="vm.someFunction()" value="Click" /> 
</div>

</body>
</html>
于 2016-05-24T10:42:05.127 回答
0

其他方式，使用函数作为构造函数并向原型添加功能

function Ctrl($window) {
  this.$window = $window;
}

Ctrl.inject = ['$window']

Ctrl.prototype.click = function() {
  this.$window.alert('clicked')
}

angular.module('app', [])
.controller('ctrl', Ctrl)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl as c'>
  <button ng-click='c.click()'>Click me!</button>  
</div>

于 2016-05-24T11:10:03.977 回答