在Angular控制器的回調中，爲什麼參數必須命名爲「$ scope」？

我在Angular寫了一個簡單的控制器，但有些東西我找不出來。

當寫回調函數，即在module.controller('myController', function($scope){

我指定一個參數的第二個參數，這裏叫做$scope。我從Angular文檔中獲得了這些代碼。

但是，奇怪的是，如果我將$scope更改爲abc之類的其他值，則控制器不再有效。

但它應該，不應該嗎？ $scope只是參數的名稱嗎？例如，對於像

var func = function(abc){ 
    alert(abc); 
}

功能應該工作，即使我改變參數xyz，像

var func = function(xyz){ 
    alert(xyz); 
}

別的東西會在這裏？參數$scope是否真的指向全局Angular對象？

這裏是我的代碼整體

<html ng-app="MyFirstApp"> 
<head> 

    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
    <meta content="utf-8" http-equiv="encoding"> 
    <title>My Page</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 


    <script> 
    var module = angular.module("MyFirstApp", []); 
    module.controller('myController', function($scope){ 
     $scope.airports = { 
      "PDX": { 
       "code": "PDX", 
       "name": "Portland International Airport", 
       "city": "Portland", 
       "destinations": [ 
       "LAX", 
       "SFO" 
       ] 
      }, 
      "STL": { 
       "code": "STL", 
       "name": "Lambert-St. Louis International Airport", 
       "city": "St. Louis", 
       "destinations": [ 
       "LAX", 
       "MKE" 
       ] 
      }, 
      "MCI": { 
       "code": "MCI", 
       "name": "Kansas City International Airport", 
       "city": "Kansas City", 
       "destinations": [ 
       "LAX", 
       "DFW" 
       ] 
      } 
     }; 

     var p = "pee"; 
     $scope.airportsArray = function arr(){ 
      var array = []; 
      for (i in $scope.airports){ 
       array.push(i); 
      } 
      return array; 
     } 
    }); 
    </script> 
</head> 

<body ng-controller="myController"> 
    <div> 
     {{ airportsArray() }} 
    </div> 
</body> 
</html>

來源

2014-10-28 CodyBugstein

這是因爲角使用Function#toString讓你的函數的源代碼，它是如何工作的一部分（的形式），它看起來在該字符串專爲$scope變量來應用其自動化的東西。下面是Function#toString一個例子：

function display(msg) { 
 
    var p = document.createElement('p'); 
 
    p.innerHTML = String(msg); // <== Implicit call to Function#toString 
 
    document.body.appendChild(p); 
 
} 
 

 
display(display);

body { 
 
    font-family: monospace; 
 
}

您可以在行動in the source看到這一點：

/** 
* @ngdoc module 
* @name auto 
* @description 
* 
* Implicit module which gets automatically added to each {@link auto.$injector $injector}. 
*/ 

var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m; 
var FN_ARG_SPLIT = /,/; 
var FN_ARG = /^\s*(_?)(\S+?)\1\s*$/; 
var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg; 
var $injectorMinErr = minErr('$injector'); 

function anonFn(fn) { 
    // For anonymous functions, showing at the very least the function signature can help in 
    // debugging. 
    var fnText = fn.toString().replace(STRIP_COMMENTS, ''), 
     args = fnText.match(FN_ARGS); 
    if (args) { 
    return 'function(' + (args[1] || '').replace(/[\s\r\n]+/, ' ') + ')'; 
    } 
    return 'fn'; 
} 

function annotate(fn, strictDi, name) { 
    var $inject, 
     fnText, 
     argDecl, 
     last; 

    if (typeof fn === 'function') { 
    if (!($inject = fn.$inject)) { 
     $inject = []; 
     if (fn.length) { 
     if (strictDi) { 
      if (!isString(name) || !name) { 
      name = fn.name || anonFn(fn); 
      } 
      throw $injectorMinErr('strictdi', 
      '{0} is not using explicit annotation and cannot be invoked in strict mode', name); 
     } 
     fnText = fn.toString().replace(STRIP_COMMENTS, ''); 
     argDecl = fnText.match(FN_ARGS); 
     forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg) { 
      arg.replace(FN_ARG, function(all, underscore, name) { 
      $inject.push(name); 
      }); 
     }); 
     } 
     fn.$inject = $inject; 
    } 
    } else if (isArray(fn)) { 
    last = fn.length - 1; 
    assertArgFn(fn[last], 'fn'); 
    $inject = fn.slice(0, last); 
    } else { 
    assertArgFn(fn, 'fn', true); 
    } 
    return $inject; 
}

來源

2014-10-28 09:52:50

感謝您的提示，但它是如何回答這個問題的？你的意思是說我們需要使用'$ scope'，因爲它是Angular唯一可以識別的參數名稱？ – CodyBugstein 2014-10-28 10:05:39

@Imray：我認爲這個問題是「在Angular控制器的回調中，爲什麼參數必須命名爲」$ scope「？」>這就是爲什麼，因爲它得到函數的*字符串*並查找該名稱。如果你願意，你可以將它改成別的東西（通過向你的控制器添加一個選項），但是如果你堅持'$ scope'，任何對代碼進行維護的人都會知道它是什麼。 – 2014-10-28 13:46:28

Crowder現在明白了。謝謝 – CodyBugstein 2014-10-28 14:02:06

這種機制被稱爲Implicit Dependencies，它是由angularjs所使用的機制之一。確定將什麼值注入參數。一種機制是根據參數名稱做出決定，這就是爲什麼在重新命名參數時面臨問題的原因。

如果您壓縮代碼，因爲這可能會重命名本地參數可能會出現問題......所以有其他安全的方法。如果你想給另一個名稱爲參數，你可以注入價值

使用不同的語法稱爲Inline Array Annotation，在下面的格式傳遞一個字符串

module.controller('myController', ['$scope', function(abc){ 
}])

另一種選擇叫做傳遞價值的實際名稱$inject Property Annotation

function myCtrl(abc) {} 
myCtrl.$inject = ['$scope'] 
module.controller('myController', myCtrl)

來源

2014-10-28 09:57:08

在Angular控制器的回調中，爲什麼參數必須命名爲「$ scope」？

回答

相關問題