AngularJS控制器中$ scope的主要用途是什么?

时间:2015-05-08 18:31:04

标签: angularjs

昨天,我看到我的同事写了一个巨大的控制器,只有一个"上帝对象" $scope看起来像下面的代码。

myApp.controller('ComplexController', ['$scope', function($scope) {

 $scope.firstTab = {
    init: function () {
      $scope.firstTab.data1.foo = $scope.firstTab.DefaultData1.foo;

      $scope.$watch('firstTab.data1.foo', function (){
        // do something
      });
    },
    defaultData1: {
      foo: 'bar'
    },
    data1: {
      foo: 'bar',
      publiclyUsedMethod1: function () {},
      publiclyUsedMethod2: function () {},
      privatelyUsedMethod1: function () {},
      privatelyUsedMethod2: function () {},
      privatelyUsedMethod3: function () {},
      privatelyUsedMethod4: function () {},
      privatelyUsedMethod5: function () {}
    },
    data2: {
      // Same code pattern as above
    },
    data3: {
      // Same code pattern as above
    },
    data4: {
      // Same code pattern as above
    }
  };

  $scope.secondTab = {
    // Same code pattern as above
  };

  $scope.thirdTab = {
    // Same code pattern as above
  };

  $scope.refresh = function(){
    // do something
  };

  $scope.$watchCollection('[$scope.firstTab.data1.foo, $scope.secondTab.data1.foo, $scope.thirdTab.data1.foo]',function(newValues,oldValues){
    // some logic
    $scope.refresh();
  });

  $scope.firstTab.init();
  $scope.secondTab.init();
  $scope.thirdTab.init();
}]);

您认为这种模式是什么? $scope对象的主要目的是什么?可以在$scope对象中存储每个私有和公共对象吗?

谢谢,

3 个答案:

答案 0 :(得分:0)

"范围是应用程序控制器和视图之间的粘合剂。" (取自https://docs.angularjs.org/guide/scope)。

我并不喜欢那种编码方式。我只会放置我想从视图中访问的内容或我想在子控制器中使用的内容。

答案 1 :(得分:0)

除了在视图和控制器之间传输数据外,$ scope对象还负责观察是否发生了任何更改(在模型上)。观察者由Angular自动分配给双花括号之间的元素,或者可以通过$ scope。$ watch()方法显式声明。 $ scope也负责传播更改。

请记住,分配给$ scope的所有数据都可以自动查看。因此明智地分配。

答案 2 :(得分:0)

$ scope将控制器“结合”到视图中。 $ scope也被认为是mvvm架构中的视图模型。不只是将所有东西都存放在$ scope中,但这就是它的美妙之处。将所有内容存储在$ scope对象中使其可供查看,而无需使用$ scope限定它。例如,$ scope.foo可以在视图中引用为foo。