在AngularJS中用什麼方法來表示數據的文本？

Question

當您使用AngularJS顯示一些數據時，它們以文本形式呈現。我想重寫這種表示方法，而不是每次寫入類似{{elem.print()}}的東西。

問題：我應該在我的對象中定義哪種方法來簡單地編寫{{elem}}並獲得（有效）與上面相同的結果？

更長的版本例如：

假設你有一個人的收藏，你寫的中繼器和內你可以：

{{person.name}} {{person.age}} {{person.address}} 

但是你可以寫你的對象的方法print返回所有的文字，然後在HTML裏面你寫：

{{person.print()}} 

但我會喜歡擺脫這一呼籲的同時，我想編寫只是

{{person}} 

得到文本表示，我表示，不只是對象的轉儲。我希望AngularJS爲每個應該顯示的對象調用一些方法。所以我的問題是這個方法是什麼，當然不是toString，我已經檢查過了。

Answer 1

在某一點的角度獲取數據。用戶看文本。那麼發生了什麼？

@greenoldman AngularJS使用interpolate service做數據綁定。

下面是一個插值字符串例子Pro AngularJS作者：Adam Freeman，我希望下面的例子能幫助你。

angular 
 
    .module("exampleApp", []) 
 
    .controller("defaultCtrl", defaultCtrl) 
 
    .directive("evalExpression", evalExpression); 
 

 
function defaultCtrl($scope) { 
 
    $scope.dataValue = "100.23"; 
 
} 
 

 
function evalExpression($interpolate) { 
 
    var interpolationFn = $interpolate("The total is: {{amount | currency}} (including tax)"); 
 
    
 
    return { 
 
    scope: { 
 
     amount: "=amount", 
 
     tax: "=tax" 
 
    }, 
 
    link: function(scope, element, attrs) { 
 
     scope.$watch("amount", function (newValue) { 
 
     var localData = { 
 
      total: Number(newValue) + (Number(newValue) * (Number(scope.tax) /100)) 
 
     } 
 
     
 
     element.text(interpolationFn(scope)); 
 
     }); 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="exampleApp"> 
 
    <div ng-controller="defaultCtrl"> 
 
    <div class="well"> 
 
     <p><input class="form-control" ng-model="dataValue" /></p> 
 
     <div> 
 
     <span eval-expression amount="dataValue" tax="10"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Interpolation example with people data

<div ng-app="demo"> 
    <div ng-controller="DefaultController as ctrl"> 
    <h1>Persons</h1> 
    <div ng-repeat="person in ctrl.persons"> 
     <person-details person="person"></person-details> 
    </div> 
    </div> 
</div> 

angular 
    .module('demo', []) 
    .controller('DefaultController', DefaultController) 
    .directive('personDetails', personDetails); 

    function DefaultController() { 
    var vm = this; 
    vm.persons = [ 
    { id: 1, name: 'Name 1', age: 24, address: 'Address Line 1' }, 
    { id: 2, name: 'Name 2', age: 22, address: 'Address Line 2' }, 
    { id: 3, name: 'Name 3', age: 23, address: 'Address Line 3' } 
    ]; 
    } 

    function PersonController() { 
    } 

    personDetails.$inject = ['$interpolate']; 

    function personDetails($interpolate) { 
    debugger 
    var interpolationFn = $interpolate('{{person.name}} {{person.age}} {{person.address}}'); 
    var directive = { 
     restrict: 'E', 
     scope: { 
     person: '=person' 
     }, 
     link: link, 
     controller: PersonController, 
     controllerAs: 'vm', 
     bindToController: true 
    }; 

    return directive; 

    function link(scope, element, attrs, ngModelCtrl) { 
     debugger 
     scope.$watch("vm.person", function (newValue, oldValue) { 
     var value = interpolationFn(scope.vm); 
     element.prop('innerHTML', value); 
     }); 
    } 
    } 

Interpolation example with people data (using only AngularJS Controller)

<div ng-app="demo"> 
    <div ng-controller="DefaultController as ctrl"> 
    <h1>Persons</h1> 
    <div ng-repeat="person in ctrl.persons"> 
     {{ctrl.printPersonDetails(person)}} 
    </div> 
    </div> 
</div> 

angular 
    .module('demo', []) 
    .controller('DefaultController', DefaultController); 

    DefaultController.$inject = ['$interpolate']; 

    function DefaultController($interpolate) { 
    var vm = this; 
    var interpolationFn = $interpolate('{{name}} {{age}} {{address}}'); 
    vm.persons = persons; 
    vm.printPersonDetails = printPersonDetails; 

    function printPersonDetails(person) { 
    return interpolationFn(person); 
    } 
    } 

    var persons = [ 
    { id: 1, name: 'Name 1', age: 24, address: 'Address Line 1' }, 
    { id: 2, name: 'Name 2', age: 22, address: 'Address Line 2' }, 
    { id: 3, name: 'Name 3', age: 23, address: 'Address Line 3' } 
    ]; 

Answer 2

我認爲這是不可能的，角是使用自己的表達式，這是有點不同於普通的js expressions。

角表達式與JavaScript表達式

• 角表情都像JavaScript表達式與 以下區別：

• 語境：JavaScript表達式是針對全球 窗口評估。在Angular中，表達式是針對範圍對象進行評估的。

• 原諒：在JavaScript中，試圖評估未定義的屬性 產生的ReferenceError或類型錯誤。在Angular中，表達式 評估寬恕未定義且爲空。

• 過濾器：可以表達式格式的數據中使用的過濾器 前顯示它。

• 沒有控制流語句：不能使用以下在 角表達式：條件，循環，或例外。

• 沒有函數聲明：你不能在一個角 表達申報功能，甚至裏面NG-初始化指令。

• 否使用文字符號創建正則表達式創建：無法在Angular表達式中創建常規 表達式。

• 使用新操作符創建對象：不能在 中使用新操作符的角度表達式。

• 不按位，逗號和虛空運營商：不能使用按位，或在角度表達 無效運營商。

在角採用AST解析器和AST編譯器構造與功能構造，{{person.name}}表達 - 不使用任何toString或其他方法，它類似於scope.person.name JS表達。

角度使用$interpolate將角度表達式轉換爲html字符串的服務與parseStringifyInterceptor。

function parseStringifyInterceptor(value) { 
     try { 
      value = getValue(value); 
      return allOrNothing && !isDefined(value) ? value : stringify(value); 
     } catch (err) { 
      $exceptionHandler($interpolateMinErr.interr(text, err)); 
     } 
     } 

我認爲你的解決方案是使用角度過濾器。