Question

我是新的Angular JS，我对范围感到困惑，我理解它是什么以及它的用法，但是当我们在控制器范围内有类变量时，我不理解为什么需要它。

我的意思是例如：

angular.module('invoice1', [])
.controller('InvoiceController', function() {
  this.qty = 1;
});

<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
 Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
</div>

现在，使用范围对象的相同代码（我的意思是变量qty）如下：

angular.module('invoice1', [])
.controller('InvoiceController',['$scope', function() {
  $scope.qty = 1;
}]);    
<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
 Quantity: <input type="number" min="0" ng-model="qty" required >
</div>

如果你从上面的代码片段中看到，我们可以访问变量＆＃34; qty＆＃34;在div标签的范围内。那么，为什么我们不能直接使用类变量，为什么我们必须注入像scope这样的特殊工厂服务。

我确信，他们可能是这样做的原因，因为他们为范围创建了单独的服务。请告诉我。

重复的问题答案很好，但太复杂了。实际上，我得到了答案，范围和对象的继承适用于范围对象的使用。我的意思是，例如：

<!doctype html>
<html >
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
    angular.module('main', [])
    .controller('ParentController',function() {
        this.qty = 999;
    })
    .controller('ChildController', function () {

    });    
    </script>
  </head>
  <body>
        <div ng-app="main">
          <div ng-controller="ParentController as parent">
              <div ng-controller="ChildController as child">    
                child exp: {{ child.qty }}
              </div>
              <b>Invoice:</b>
              <div>
                Quantity: <input type="number" min="0" ng-model="parent.qty" required >
                exp: {{ parent.qty }}
              </div>
          </div>

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

现在，如果您观察到，在子控制器中，它们不是名为qty的变量，因此只是它无法访问父控制器的qty变量。现在，将其替换为范围，如下所示：

<!doctype html>
<html >
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
  angular.module('main', [])
  .controller('ParentController',function($scope) {
      $scope.qty = 999;
  })
  .controller('ChildController', function ($scope) {

  });    
  </script>
</head>
<body>
      <div ng-app="main">
        <div ng-controller="ParentController as parent">
            <div ng-controller="ChildController as child">    
              child exp: {{ qty }}
            </div>
            <b>Invoice:</b>
            <div>
              Quantity: <input type="number" min="0" ng-model="qty" required >
              exp: {{ qty }}
            </div>
        </div>

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

现在，即使子控制器没有qty变量，它也可以从父控制器继承并执行表达式＆＃34; child exp：{{qty}}＆＃34;完美。

请更多特殊用途的示波器？另外，请考虑一下，我会删除这个问题或接受我的问题得到解答，如果有人认为它是重复的。作为一个新手，我只是希望与一些例子不同。

Answer 1

首先，如果可能，您不应该使用ng-controller。

在使用ng-controller编写指令并将控制器封装在指令

之前

var app = angular.module('app',[]);
app.directive('invoice', Invoice);

function Invoice(){    
   return {
      restrict: 'E',
      template: '<div>' +
                   'Quantity: <input type="number" min="0" ng-model="vm.qty" required >' +
                '</div>',
      controller: function InvoiceController(){
                     var vm = this;
                     this.qty = 1;
                  },
      controllerAs: 'vm',
      scope: {}
   };
}


<invoice></invoice>

或使用angular-ui-router为每个特定的路线/路线使用唯一的控制器。

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

  function Configuration($stateProvider) {
    $stateProvider
        .state('app.invoice', {
            url: '/invoice',
            template: '<div>' +
                         'Quantity: <input type="number" min="0" ng-model="vm.qty" required >' +
                      '</div>',
            controller: function InvoiceController(){
                           var vm = this;
                           vm.qty = 1;
                        },
            controllerAs: 'vm'
        });
  }

我认为使用this或$scope只是个人偏好，但是如果您使用它，则应将其装饰为var vm = this;以防止闭包或嵌套函数中的此问题。

当我们有类变量时，Angular JS中$ scope对象的特殊/使用是什么

1 个答案: