如何使用$ translate監視角度指令的變化

Question

這是小提琴鏈接

如何查看指令中的更改？ 在此小提琴示例中，使用$ translate轉換內容。 除了指令中的內容，其他所有內容都發生了變化。

HTML看起來像這樣-

 <div ng-app='demo'>

<div name="info" ng-controller="myctrl">
    <label translate="TERMS_LABEL"></label>
    <h4 translate="ZIPCODE_LABEL"></h4>
    <p translate="LAST_NAME"></p>
   <terms-conditions conditions="TERMS_CONDITIONS" checked="checked"></terms-conditions> 
    <button type="submit"  ng-click="changeLanguage('de')" >Spanish</button>
     <button type="submit"  ng-click="changeLanguage('en')" >English</button>

     </div>

指令看起來像

 demo.directive("termsConditions",['$translate',function($translate){
return {
    restrict:"E",
    scope:{
         checked:'='
    },
    link: function(scope, element, attr) { 
        $translate(attr.conditions)
        .then(function (translatedValue) {
            scope.conditions = translatedValue;
        });
    },
    template:
    "<div class='terms row'><span class='col-md-12'>{{conditions}}</span></div><br><input   
   type='checkbox' ng-model='checked'><span>Yes, I agree to the terms and condtions</span>"
}

}]);

Answer 1

您有理由不能在模板中進行翻譯嗎？

http://jsfiddle.net/UGLjh/75/

demo.directive("termsConditions",['$translate',function($translate){
    return {
        restrict:"E",
        scope:{
             checked:'='
        },
        link: function(scope, element, attr) { 
            attr.$observe('conditions', function (untranslatedValue) {
                scope.conditions = untranslatedValue;
            });
        },
        template:
        "<div class='terms row'><span class='col-md-12'>{{conditions | translate}}</span></div><br><input type='checkbox' ng-model='checked'><span>Yes, I agree to the terms and condtions</span>"
    }

}]);

如果您知道不會插入屬性，則不必使用$observe ； 只需將其粘貼在示波器上，如下所示：

    link: function(scope, element, attr) { 
        scope.conditions = attr.conditions;
    },