AngularJS$作用域包括我的绑定变量，但以后仍然无法访问，为什么

AngularJS $scope includes my bound variable but remains inaccessible later on, why?

本文关键字：为什么 访问 作用域 包括 我的 变量 绑定 AngularJS      更新时间：2023-10-07

我刚开始学习AngularJS，觉得它很有趣，但它的行为也有点奇怪（IMO）。我在Angular网站上浏览了一些例子，并决定尝试添加一个重复输入，该输入将被传递到工厂中使用。我有以下代码：

// script.js
var myApp = angular.module('myServiceModule', [])
  .controller('MyController', ['$scope', 'notify', function($scope, notify) {
    var repeat = Number($scope.repeat);
    console.log($scope);        // <-- inspecting $scope object shows the $scope.repeat value as a string "3"
    console.log($scope.repeat); // <-- reports undefined!?
    $scope.callNotify = function(msg, repeat) {
      notify(msg, repeat);
    };
  }]
);
myApp.factory('notify', ['$window', function(win) {
  var msgs = [];
  return function(msg, repeat) { // <-- trying to pass repeat here
    msgs.push(msg);
    if (msgs.length == repeat) { // <-- for use here
      win.alert(msgs.join("'n"));
      msgs = [];
    }
  }
}]);
<!-- index.html //-->
<!doctype html>
<html>
  <head>
    <title>Services test 1 (Factory method)</title>
  </head>
  <body ng-app="myServiceModule">
    <div id='simple' ng-controller="MyController">
      <p>Let's try a simple notification service!</p>
      <input ng-init="repeat='3'" ng-model="repeat">
      <input ng-init="message='test'" ng-model="message">
      <button ng-click="callNotify(message);">NOTIFY</button>
      <p>Click {{repeat}} times to see an alert</p>
    </div>  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

基本上，我想知道为什么当我控制台.log（$scope）时，我可以看到$scope.repeat在那里，并且如预期的那样是"3"。然而，在我自己检查$scope的下面一行，我console.log（$scope.repeat）发现它返回"undefined"。我在这里做错了什么？感谢您的投入！

编辑：可以在此处找到此的原始代码：https://docs.angularjs.org/guide/services

控制器将按以下顺序运行

  1. console.log（$scope）
  2. console.log（$scope.repeat）
  3. ng init="repeat='3'"

所以事实上，当你运行时

console.log($scope);

它实际上没有init，但因为你的ng init="repeat='3'"在半毫秒后运行，并且在它运行2秒后检查了$scope变量，所以它被添加了

var test = {hello: 1, testing: 2, tests: 3, more: function(){ return 'hello' }}
console.log(test)
test.addthis = 'Did I add this?'

当你检查console.log时，你会看到它显示了你添加的内容。这是因为对象是通过引用的，所以如果你对对象进行console.log，它不会是当时的快照，而是无论它如何变化，它都是什么。

编辑之后尝试

var test = {hello: 1, testing: 2, tests: 3, more: function(){ return 'hello' }}
console.log(test)
console.log("will it work? : " + test.addthis)
test.addthis = 'Did I add this?'

有道理吗？

所以事实上，您在控制台中看到的是稍后ng init发生的时候。这就是为什么当你尝试登录console.log（$scope.repeat）；它给了您一个未定义的值，因为这将记录该时间点的值。

不要使用ng-init。您应该在控制器中初始化变量。

因为，如果首先执行控制器，那么ng-init标记将是无用的且不同步的。

var myApp = angular.module('myServiceModule', [])
  .controller('MyController', ['$scope', 'notify', function($scope, notify) { 
    $scope.repeat = 3; 
    $scope.message = "test";
    console.log($scope);        // <-- inspecting $scope object shows the $scope.repeat value as a string "3"
    console.log($scope.repeat); // <-- reports undefined!?
    $scope.callNotify = function(msg, repeat) {
      notify(msg, repeat);
    };
  }]
);

然后在你的index.html

<!doctype html>
<html>
  <head>
    <title>Services test 1 (Factory method)</title>
  </head>
  <body ng-app="myServiceModule">
    <div id='simple' ng-controller="MyController">
      <p>Let's try a simple notification service!</p>
      <input ng-model="repeat">
      <input ng-model="message">
      <button ng-click="callNotify(message);">NOTIFY</button>
      <p>Click {{repeat}} times to see an alert</p>
    </div>  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

好的，在李维和杨丽的帮助下（谢谢！）这是可行的：

var myApp = angular.module('myServiceModule', [])
  .controller('MyController', ['$scope', 'notify', function($scope, notify) {
    $scope.repeat = 3;
    $scope.callNotify = function(msg) {
      notify(msg, $scope.repeat);
    };
  }]
);
myApp.factory('notify', ['$window', function(win) {
  var msgs = [];
  return function(msg, repeat) {
    msgs.push(msg);
    if (msgs.length == repeat) {
      win.alert(msgs.join("'n"));
      msgs = [];
    }
  }
}]);
<!doctype html>
<html>
  <head>
    <title>Services test 1 (Factory method)</title>
  </head>
  <body ng-app="myServiceModule">
    <div id='simple' ng-controller="MyController">
      <p>Let's try a simple notification service!</p>
      <input ng-model="repeat" type="number">
      <input ng-init="message='test'" ng-model="message">
      <button ng-click="callNotify(message);">NOTIFY</button>
      <p>Click {{repeat}} times to see an alert</p>
    </div>  
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

相关文章：