Question

说我有AdamController as adam和AnujController as anuj。我希望anuj.anujProp每次j更改时都附加adam.adamProp。

怎么可以这样做？什么是最好的方式？

Answer 1

以下是我提出的4种可能方式。我按照我个人认为最好的顺序排列它们。

活动 - http://plnkr.co/edit/4AD8e47DaOSuutrphIkN?p=preview
工厂方法 - http://plnkr.co/edit/Vixab8LjDtow5YYfnlMV?p=preview
工厂+ $ watch - http://plnkr.co/edit/1zVZ9EDarCGPOMZvrJMd?p=preview
$ scope inheritance - http://plnkr.co/edit/3b7tzPI5Y4CcwWYXUk25?p=preview

$ scope继承方法只是感觉“混乱”。我喜欢在工厂方法中使用事件驱动的方法，因为我觉得有一种与工厂相关的开销，如果它只是用于这个目的，那么开销就不值得了。此外，这似乎正是事件的目的。我把（2）放在（3）之前，因为$ watch伤害了表现。

活动

angular
  .module('app', [])
  .controller('AdamController', AdamController)
  .controller('AnujController', AnujController)
;

function AdamController($rootScope) {
  var vm = this;
  vm.prop = 'adam';
  
  vm.update = function() {
    $rootScope.$broadcast('propChange');
  };
}

function AnujController($scope) {
  var vm = this;
  vm.prop = '';

  $scope.$on('propChange', function(event) {
    event.currentScope.anuj.prop += 'x';
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='app'>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller='AdamController as adam'>
      <input ng-model='adam.prop' ng-change='adam.update()'>
    </div>
    
    <div ng-controller='AnujController as anuj'>
      <p>{{ anuj.prop }}</p>
    </div>
  </body>

</html>

工厂方法

angular
  .module('app', [])
  .factory('Factory', Factory)
  .controller('AdamController', AdamController)
  .controller('AnujController', AnujController)
;

function Factory() {
  return {
    anujProp: 'anuj',
    update: function() {
      this.anujProp += 'j';
    }
  };
}

function AdamController(Factory) {
  var vm = this;
  vm.factory = Factory;
}

function AnujController(Factory) {
  var vm = this;
  vm.factory = Factory;
}

<!DOCTYPE html>
<html ng-app='app'>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller='AdamController as adam'>
      <input ng-model='initial' ng-change='adam.factory.update()'>
    </div>
    
    <div ng-controller='AnujController as anuj'>
      <p>{{ anuj.factory.anujProp }}</p>
    </div>
  </body>

</html>

工厂+ $ watch

angular
  .module('app', [])
  .factory('Factory', Factory)
  .controller('AdamController', AdamController)
  .controller('AnujController', AnujController)
;

function Factory() {
  return {
    shared: 'shared',
    related: 'related'
  };
}

function AdamController(Factory) {
  var vm = this;
  vm.factory = Factory;
}

function AnujController(Factory, $scope) {
  var vm = this;
  vm.factory = Factory;
  
  $scope.$watch('anuj.factory.related', function(newValue, oldValue, scope) {
    scope.anuj.factory.related = newValue.toUpperCase();
  });
}

<!DOCTYPE html>
<html ng-app='app'>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller='AdamController as adam'>
      <input ng-model='adam.factory.shared'>
      <input ng-model='adam.factory.related'>
    </div>
    
    <div ng-controller='AnujController as anuj'>
      <p>{{ anuj.factory.shared }}</p>
      <p>{{ anuj.factory.related }}</p>
    </div>
  </body>

</html>

$ scope inheritance

angular
  .module('app', [])
  .controller('AdamController', AdamController)
  .controller('AnujController', AnujController)
;

function AdamController($scope) {
  var vm = this;
  vm.adamProp = 'adam';
  vm.update = function() {
    var anuj = $scope.$parent.$$childTail.anuj;
    anuj.anujProp += 'j';
  };
}

function AnujController() {
  var vm = this;
  vm.anujProp = 'anuj';
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="AdamController as adam">
      <input ng-model="adam.adamProp" ng-change="adam.update()" />
    </div>
    <div ng-controller="AnujController as anuj">
      <p>{{ anuj.anujProp }}</p>
    </div>
  </body>

</html>

如何在两个角度控制器的属性之间建立关系？

1 个答案: