12

angular jsを使用して標準の通知UIを実装する必要があります。私のアプローチは次のとおりです（簡略化）：

<div ng-controller="MainCtrl">
  <div>{{message}}</div>
  <div ng-controller="PageCtrl">
     <div ng-click="showMessage()"></div>
  </div>
</div>

そして、ページコントローラーは次のとおりです。

module.controller("PageCtrl", function($scope){
  counter = 1
  $scope.showMessage = function(){
    $scope.$parent.message = "new message #" + counter++;
  };
});

これはうまくいきます。しかし、私は $scope.$parent を呼び出す必要があるという事実が本当に好きではありません。

別のネストされたコントローラーにいる場合、$scope.$parent.$parent が存在するため、これを理解するのはすぐに悪夢になります。

angularでこの種のグローバルUI通知を作成する別の方法はありますか?

4

5 に答える 5

17

イベントを使用して、あるコンポーネントから別のコンポーネントにメッセージを送信します。そうすれば、コンポーネントを関連付ける必要はまったくありません。

1 つのコンポーネントからイベントを送信します。

app.controller('DivCtrl', function($scope, $rootScope) {
  $scope.doSend = function(){
    $rootScope.$broadcast('divButton:clicked', 'hello world via event');
  }
});

別のコンポーネントなど、好きな場所にリスナーを作成します。

app.controller('MainCtrl', function($scope, $rootScope) {
  $scope.$on('divButton:clicked', function(event, message){
    alert(message);
  })
});

http://plnkr.co/edit/ywnwWXQtkKOCYNeMf0FJ?p=previewで実際のサンプルを作成しました。

スコープに関する AngularJS のドキュメントをチェックして、実際の構文の詳細を確認することもできます。

これにより、わずか数行のコードでクリーンで高速なソリューションが提供されます。

よろしく、ユルゲン

于 2013-06-19T16:47:54.720 に答える
7

これを確認する必要があります: 通知を簡単に作成するための AngularJS コンポーネント。HTML5 通知も使用できます。 https://github.com/phxdatasec/angular-notifications

于 2013-10-10T13:37:56.723 に答える
3

これを見た後: AngularJSでコントローラー間で通信する正しい方法は何ですか? そしてそれ：https://gist.github.com/floatingmonkey/3384419

pubsub を使用することにしました。これが私の実装です。

コーヒースクリプト:

module.factory "PubSub", ->
  cache = {}
  subscribe = (topic, callback) ->
    cache[topic] = [] unless cache[topic]
    cache[topic].push callback
    [ topic, callback ]
  unsubscribe = (topic, callback) ->
    if cache[topic]
      callbackCount = cache[topic].length
      while callbackCount--
        if cache[topic][callbackCount] is callback
          cache[topic].splice callbackCount, 1
    null
  publish = (topic) ->
    event = cache[topic]
    if event and event.length>0
      callbackCount = event.length
      while callbackCount--
        if event[callbackCount]
          res = event[callbackCount].apply {}, Array.prototype.slice.call(arguments, 1)
      # some pubsub enhancement: we can get notified when everything
      # has been published by registering to topic+"_done"
      publish topic+"_done"
      res

  subscribe: subscribe
  unsubscribe: unsubscribe
  publish: publish

Javascript:

module.factory("PubSub", function() {
  var cache, publish, subscribe, unsubscribe;
  cache = {};
  subscribe = function(topic, callback) {
    if (!cache[topic]) {
      cache[topic] = [];
    }
    cache[topic].push(callback);
    return [topic, callback];
  };
  unsubscribe = function(topic, callback) {
    var callbackCount;
    if (cache[topic]) {
      callbackCount = cache[topic].length;
      while (callbackCount--) {
        if (cache[topic][callbackCount] === callback) {
          cache[topic].splice(callbackCount, 1);
        }
      }
    }
    return null;
  };
  publish = function(topic) {
    var callbackCount, event, res;
    event = cache[topic];
    if (event && event.length > 0) {
      callbackCount = event.length;
      while (callbackCount--) {
        if (event[callbackCount]) {
          res = event[callbackCount].apply({}, Array.prototype.slice.call(arguments, 1));
        }
      }
      publish(topic + "_done");
      return res;
    }
  };
  return {
    subscribe: subscribe,
    unsubscribe: unsubscribe,
    publish: publish
  };
});
于 2013-06-18T16:47:33.453 に答える
1

私の提案は、自分で作成しないことです。toastr などの既存のモデルまたは以下のようなものを使用します。 http://beletsky.net/ng-notifications-bar/

于 2016-02-13T12:56:56.473 に答える