Question

使用angularJS 1.3，在下面的代码中，

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
            <script type="text/javascript">
                var app = angular.module("sample", []);
                app.controller("emp", function(){
                        this.Name = "jag";
                        this.sal = "4500";
                        this.getAnnualSal = function(){
                            return (this.sal) * 12;
                        }
                    });
            </script>
        </head>
        <body ng-app="sample">
            <div ng-controller="emp as o">
                Hello {{o.Name}}, your annual salary is {{o.getAnnualSal()}}

            </div>
        </body>
    </html>

将函数（getAnnualSal）保留为控制器实例成员看起来很奇怪。因为emp的每个控制器实例都有自己的getAnnualSal。

emp控制器实例范围如下所示：

将函数（getAnnualSal）维护为原型成员是否有意义？如果是，请提供语法。

Answer 1

您的选择是将控制器声明为单独的类。 AngularJS没有为此提供特殊语法，因此您可以......

function MyController() {
    this.Name = "jag";
    this.sal = "4500";
} 
MyController.prototype.getAnnualSal = function(){
    return (this.sal) * 12;
}
var app = angular.module("sample", []);
app.controller("emp", MyController);

如果您想使用自定义注入（例如$scope，$rootScope，...），您可以：

function MyController($scope) { ... all the former code ... }
...
var app = angular.module("sample", []);
app.controller("emp", ['$scope', MyController]);

有关注射的疑问，请参阅官方教程或文档（例如$provide）。唯一的区别是使用匿名函数或命名函数（它总是表现为构造函数）。

Answer 2

您可能希望实际使用指令而不是唯一的控制器。如果你考虑一下，

如果您的控制器范围需要dom操作，您会怎么做？
如果您需要多个此控制器实例，该怎么办？
那你需要一个html模板吗？

一般来说，你应该做的一件事是将它分配给范围顶部的var，以便稍后引用。

app.controller("emp", function(){
                        var vm = this;
                        this.Name = "jag";
                        this.sal = "4500";
                        this.getAnnualSal = function(){
                            return (vm.sal) * 12;
                        }
                    });

如何避免在控制器范围内作为实例成员的功能？

2 个答案: