通過角度指令輸出服務屬性值

Question

我的目標是通過元素指令輸出一個值（來自服務），使得html看起來像這樣<msg msg="alertMsg"></msg>，並從服務中彈出一個值。

這裏是我的代碼至今：

app.directive("msg", ['MsgService', function(MsgService) { 
    return { 
     restrict: "E", 
     scope: {//something here to pass MsgService to template }, 
     template: 'Message:{{MsgService.getAlertMsg()}}' 
    }; 
}]); 

app.service('MsgService', function() {   
    this.alertMsg = 'default'; 
    this.getAlertMsg = function(){ 
     return this.alertMsg; 
    }; 
    this.setAlertMsg = function(string) { 
     this.alertMsg = string; 
    }; 
}); 

HTML將會解析/編譯成...

<msg msg="alertMsg">Message: default</msg> 

我需要什麼其他的代碼？

如果服務不能直接使用，我應該通過控制器訪問它嗎？

app.directive("msg", function() { 
    return { 
     restrict: "E", 
     scope: {  
      getMsg: '&msg' 
     }, 
     controller: 'MsgController', 
     template:'Message:{{getMsg()}}' 
    }; 
}]); 

app.controller('MsgController', ['MsgService' , function(MsgService){ 
    this.getAlertMsg = function(){ 
     return MsgService.getAlertMsg(); 
    }; 
}]); 

HTML將會解析/編譯成...

<msg msg="getAlertMsg()">Message: default</msg> 

對不起，代碼或功能使用任何錯誤，我是相當新的角度。

Answer 1

您可以使用指令的link函數。對於您的指令的每個呈現實例，此函數都會調用一次。除其他事項外，它還收到您的指示的範圍。你可以調用MsgSevice.getAlertMsg()服務方法的結果很容易地擴展您的範圍：

var app = angular.module("app", []); 
app.directive("msg", ['MsgService', function(MsgService) { 
    return { 
     restrict: "E", 
     scope: true, 
     template: 'Message:{{msg}}', 
     link: function (scope, $element, attrs) { 
      scope.msg = MsgService.getAlertMsg(); 
     } 
    }; 
}]); 

app.service('MsgService', function() { 
    this.alertMsg = 'default'; 
    this.getAlertMsg = function(){ 
     return this.alertMsg; 
    }; 
    this.setAlertMsg = function(string) { 
     this.alertMsg = string; 
    }; 
}); 

後來，我相信你會只想從msg指令的msg DOM屬性顯示警報消息。實現這一點非常簡單，因爲AngularJS已經爲這個常見用例做好了準備。解決方案涉及創建隔離範圍。可以使用父環境的屬性填充隔離範圍。一種可能性是使用「@」語法從指令元素中使用DOM屬性的值。在這種情況下，你甚至不需要整個MsgService服務：

app.directive("msg", function() { 
    return { 
     restrict: "E", 
     scope: { 
      "msg": "@" 
     }, 
     template: 'Message:{{msg}}' 
    }; 
}); 

Answer 2

最簡單的是設置在你的範圍內的服務和使用，在您的模板：

app.directive("msg", ['MsgService', function(MsgService) { 
    return { 
     restrict: "E", 
     scope: { }, 
     template: 'Message:{{MsgService.getAlertMsg()}}', 
     link: function(scope, element, attrs) { 
      scope.MsgService = MsgService; 
     } 
    }; 
}]);