Thông báo giao diện người dùng với js góc

Question

Tôi phải triển khai một số giao diện người dùng thông báo chuẩn với js góc. Cách tiếp cận của tôi là như sau (giản thể):

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

Và với bộ điều khiển trang hạnh phúc:

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

này hoạt động tốt. Nhưng tôi thực sự không thích thực tế là tôi cần gọi $ scope. $ Parent.

Bởi vì nếu tôi ở trong một bộ điều khiển lồng nhau khác, tôi sẽ có $ scope. $ Parent. $ Parent, và điều này trở thành một cơn ác mộng để hiểu.

Có cách nào khác để tạo loại thông báo giao diện người dùng toàn cầu này với góc cạnh không?

Answer 1

Sử dụng sự kiện để gửi tin nhắn từ o ne thành phần khác. Bằng cách đó, các thành phần không cần phải liên quan chút nào.

Gửi một sự kiện từ một thành phần:

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

và tạo ra một người biết lắng nghe bất cứ nơi nào mà bạn thích, ví dụ trong thành phần khác:

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

tôi đã tạo ra một ví dụ làm việc cho bạn tại http://plnkr.co/edit/ywnwWXQtkKOCYNeMf0FJ?p=preview

Bạn cũng có thể kiểm tra AngularJS docs about scopes để đọc thêm về cú pháp thực tế.

Điều này cung cấp cho bạn giải pháp sạch và nhanh chỉ trong một vài dòng mã.

Kính trọng, Jurgen

Answer 2

Sau khi xem xét điều này: What's the correct way to communicate between controllers in AngularJS? và sau đó rằng: https://gist.github.com/floatingmonkey/3384419

tôi quyết định sử dụng pubsub, đây là thực hiện của tôi:

Coffeescript:

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 
    }; 
}); 

Answer 3

Bạn nên kiểm tra này: Một AngularJS thành phần để dễ dàng tạo ra các thông báo. Cũng có thể sử dụng thông báo HTML5. https://github.com/phxdatasec/angular-notifications

Answer 4

Đề xuất của tôi không tự tạo một đề xuất. Sử dụng các mô hình hiện có như toastr hoặc một cái gì đó như dưới đây. http://beletsky.net/ng-notifications-bar/

Answer 5

Như đã đề xuất ở trên, hãy thử sử dụng thư viện thông báo bên ngoài.Như vậy là một loạt lớn trong số họ:

• http://alertifyjs.com/
• https://notifyjs.com/
• https://www.npmjs.com/package/awesome-notifications
• http://codeseven.github.io/toastr/demo.html