0

私はcontrollerA、ページ上で複数の (しかし同様の) コントローラー ( ) と、いくつかのプロパティを変更できる別のコントローラー ( ) を使用するアプリに取り組んでいますが、要素が以前に選択されcontrollerBていた場合のみです。controllerA

(controllerA一部のプロパティでは、 data- 属性を使用して渡され、適用されるデフォルト値を持つことができます)

この段階では、最後の color プロパティのみを変更できますcontrollerB(それがアクティブなスコープであるため、これは理にかなっています。私の質問は、controllerB スコープを選択したの「アクティブな」スコープコピーに変更するにはどうすればよいcontrollerAですか?

// Code goes here

var webApp = angular.module("webApp", []);

webApp.controller("controllerA", function($scope, $rootScope, $element, styleFactory){
$scope.selected = false;
var color = angular.element($element[0]).attr("data-style-color");
styleFactory.setColor(color);  
$scope.data = styleFactory.getData();

$scope.select = function(){
  $scope.selected = !$scope.selected;
}
});

webApp.controller("controllerB", function($scope, $rootScope, $element, styleFactory){
  $scope.data = styleFactory.getData();
});

webApp.factory("styleFactory", function(){
  var data = {"style":"color:yellow"}

  return {
    setColor: function(color){
      data = {"style":"color:"+color};
    },
    getData: function(){
      return data;
    }
  };
});

完全な例: http://plnkr.co/edit/He2m7ArfRSur9Igq2eur?p=preview

ありがとう、 --iM

4

1 に答える 1

0

ここで説明したように機能する変更された plnkr を確認できます。

個人的には、アプリのアーキテクチャを再構築し、styleFactory の実装を再考します。

いくつかの考慮事項:

  • data = {"style":"color:"+color}データオブジェクト全体を置き換えるため、他のすべての参照が失われる$scope.data = styleFactory.getData()ため、最後のオブジェクトに対してのみ機能します。controllerA

  • controllerAとの上にある親コントローラーを作成してみてくださいcontrollerB。

  • ディレクティブを使用してこの問題を解決してみてください。

于 2013-08-03T03:30:01.530 に答える