Question

为什么此代码可以正常工作

<div ng-app="my_app" ng-controller="my_ctrl">
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{ firstName + " " + lastName }}
</div>

<script>
    var app = angular.module("my_app", []);

    function ScopeController($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Another John";
    }
    app.controller("my_ctrl", ScopeController);
</script>

这不是

function ScopeController(scope) {
    scope.firstName = "John";
    scope.lastName = "Another John";
}

据我了解编程，$scope只是ScopeController的局部变量。 ScopeController本身只是一个回调函数。那么为什么我的代码的正确工作取决于我如何命名回调的局部变量？如果它不仅仅是一个局部变量，那么为什么它作为一个参数传递？

Answer 1

这并不意味着什么。 $scope只是范围服务的名称。 Angular的大部分内容都带有$前缀，以避免踩到您选择的名称，因此您不必为您的所有内容添加前缀用$或其他东西冲突名称。当你简单地称它为scope时，它停止工作，因为Angular根据参数的名称确定应该注入哪些服务;并且它不知道任何名为scope的服务。要使变量名称为任意名称，请使用带注释的语法来定义控制器：

function ScopeController(scope) { ... }

app.controller('my_ctrl', ['$scope', ScopeController]);

Answer 2

$scope是一个Angular关键字。 Angular将查找特定的变量名称，如$scope或$timeout，并注入相应的服务和模块。

它不适用于scope，因为Angular的核心没有scope服务。

就此而言，这是一个缩小的问题：由于代码缩小器会破坏变量名以节省字节，因此它们会将function ScopeController($scope)转换为function a(b)。然后Angular就会丢失。它不知道b是什么。

为了解决这个问题，我们使用普通字符串来注入控制器： app.ScopeController([ "$scope", function($scope) { .... };] )。然后将其缩小为app.a([ "$scope", function(b) { .... };] )，但它没关系，因为字符串不会缩小，Angular知道b引用$scope。

Answer 3

您应该阅读有关在Angular中注入依赖项的信息。是的，HomeCtrl是一个函数，但它会传递到ScopeController，并在其中注册为应用程序中的新控制器。这个新控制器的名称是“my_ctrl”。 app.controller()是一个服务，将在实例化时注入您的$scope。您可以通过my_ctrl访问控制器Scope，之后就像您一样。

$scope告诉angular - ＆gt;使用我的内部$scope，而$scope service可能是您自己编写的内容。

Answer 4

要扩展所提供的答案deceze，任何服务都是如此。这一切都取决于你如何进行依赖注入。例如：

var app = angular.module('myApp', []);

function MyService() {
    this.value = 'hi';
}
app.service('MyService', MyService);

function MyController(MyService) {
    var val = MyService.value; // 'hi'
}
app.controller('MyController', MyController);

function MySecondController(ms) {
    var val = ms.value; // 'hi'
}

// this is the key. if you use this method then you
// can call you parameter whatever you want in the controller
app.controller('MySecondController', ['MyService', MySecondController]);

// this will work similarly to the MySecondController
function MyThirdController(service) {
    var val = service.value; // 'hi'
}
MyThirdController.$inject(['MyService']);
app.controller('MyThirdController', MyThirdController);

什么＆＃39; $＆＃39;真的意味着在范围内＆＃39; $范围＆＃39;角度变异

4 个答案: