Question

我是Angular的新手并且正在搞乱控制器。我创建了这个简单的控制器功能：

(function(){
var app = angular.module('store', []);

app.controller('StoreController', function(){
            this.product = gem;
});

    var gem = {
        name: "Dodecahedron",
        price: 2.95,
        description: '...'
        };    


})();

当我在index.html下调用此控制器时，它运行正常。这是我的index.html：

<html>

<head>

<script src = "angular.min.js"></script> <!--ANGULAR SOURCE-->
<script src = "app.js"></script> <!--APP SOURCE-->
<link rel = "stylesheet" href  = "bootstrap.css" type = "text/css"> <!--BOOTSTRAP-->

</head>

<body ng-app = "store">
<div ng-controller="StoreController as store">
    <h1>{{store.product.name}}</h1>
    <h2> {{store.product.price}} </h2>
    <p> {{store.product.description}} </p>
</div>

</body>


</html>

我的代码正在按预期工作。但是，我没有得到最后一组括号的目的在于我的控制器功能，因为一旦我拿出它，我的控制器就不再有效了。这似乎是不必要的，但由于某种原因，没有它我的控制器将无法工作。有人能告诉我为什么这不起作用吗？

谢谢！

Answer 1

整个

(function(){


})()

周围的代码称为“自调用函数”。因此，省略（）只是定义一个函数而从不调用它，因此你的角度应用程序不会配置它的“存储”模块。

其目的是创建一个范围，以便变量“app”和任何其他变量不会泄漏到全局（窗口）上下文中。

如果你使用像webpack这样已经添加了本地函数上下文的模块捆绑器，那么这就变得多余了。我认为它对你有用，因为你的应用程序中的每个角度文件都有一个脚本标记。

在函数内调用控制器函数

1 个答案: