2

私はangularjsが初めてで、angularuiモジュールを使用してアコーディオンを構築しようとしています。各アコーディオン ヘッダーには、サービス ファクトリを呼び出すネストされたタグがあります。サービス ファクトリは ID に従ってデータを返し、内部のアコーディオン コンテンツを更新しますが、すべてのアコーディオン ヘッダーに対して更新します。つまり、アコーディオン ヘッダーをクリックすると、すべてのアコーディオン div に対して同じコンテンツが読み込まれます。クリックしたヘッダーだけに戻してほしいです。工場サービスの範囲を理解するには、もっと助けが必要だと思います。だから私の質問は、誰かが私のサービスファクトリーを呼び出し元だけを更新する方法を理解するのを手伝ってくれるかどうかです。

私のhtml：

<accordion close-others="false">
<accordion-group ng-repeat="dept in departments"> 
  <accordion-heading>
    <span ng-controller="DeptHeaderCtrl" ng-click="loadEmps(dept.DeptID)">
      {{dept.DepartmentName}} ({{dept.DepartmentShortName}})
    </span>
  </accordion-heading> 
  <div ng-controller="departmentList">
    <div ng-repeat="emp in deptemps">
      {{emp.Name_First}}
    </div>
  </div>
</accordion-group>

angularjs ファクトリー サービス コード:

app.factory('DeptFactory', function ($http, $rootScope) {
      var sharedDeptEmpList = {};

      sharedDeptEmpList.EmpList = '';

      sharedDeptEmpList.fetchDeptEmps = function (deptid) {
        var dept = { "userid": userid, "deptid": deptid };

        $http({ method: 'POST', url: 'api/Fetch/DeptEmployees/', data: dept }).
      success(function (data, status, headers, config) {
        EmpList = data;
        sharedDeptEmpList.broadCastEmpList();
      }).
      error(function (data, status, headers, config) {
        alert('error');
      });

      };

      sharedDeptEmpList.broadCastEmpList = function () {
        alert('broadcasting');
        $rootScope.$broadcast('handleBroadcast');
      };


      return sharedDeptEmpList;

    });

ブロードキャストを受信する Angularjs コントローラー:

app.controller('departmentList', function ($scope, $http, DeptFactory) {

      $scope.init = function (p_userid) {
        userid = p_userid;
      };


      $scope.$on('handleBroadcast', function () {
        alert('broadcast received');
        $scope.deptemps = EmpList;
      }); 

  });
4

1 に答える 1

3

各ディレクティブは、DOM ノードを特定のスコープに関連付ける単なる JavaScript です。DOM ツリーを考えるのと同じように、「スコープ ツリー」を考えることができます。一方、サービスは、注入してどこでも使用できる単なるシングルトン オブジェクトです。DOM/スコープ ツリーとの暗黙的な関係はありません。

$rootScope を DeptFactory に注入することで、スコープ ツリー全体にアクセスできるようになります。$broadcast() を呼び出すと、ツリー全体にイベントが送信され、ルートから始まり、すべてのリーフ スコープに伝搬されます。

何が起こっているのかを完全に理解するのに十分なコードはわかりませんが、すべてのアコーディオン div が $broadcasted イベントを受け取り、同じように反応しているため、すべてのアコーディオン div が変更されていると推測しています。変更しようとしている div を識別するために、ある種の ID 値を $broadcast することをお勧めします。次に、各アコーディオンでこのイベントを処理するときに、ID をアコーディオンの ID と照合して、変更する必要があるかどうかを確認します。

これは役に立ちますか？

于 2013-10-21T22:23:18.073 に答える