如何嵌套角度表达式？

Question

我想要做类似的东西（在我的html）：

{{ Customer.Name }} 

时Customer.Name是

"{{ Customer.FirstName + ' ' + Customer.LastName }}" 

我怎样才能做到这一点？ Customer.Name -String是从服务器读取的动态配置。我想在我的应用程序的几个地方做到这一点，所以我不想要一个静态的代码隐藏功能，为我做到这一点。

我想要的只是Angular递归地评估表达式。

Answer 1

您可以使用该方法$eval（）的$scope实现这一目标。

例如，您的控制器将定义你的客户对象是这样的：

function TestCtrl ($scope) { 
    $scope.customer = { 
    firstname : 'Darth', 
    lastname : 'Vader', 
    name : 'customer.firstname + " " + customer.lastname' 
}; 
$scope.ev = $scope.$eval; 

}

然后在您的视图中，您可以使用配置字符串是这样的：

<h1 ng-controller="TestCtrl">Hello {{$eval(customer.name)}}!</h1> 

它重要的是你的customer.name属性不包含大括号！

看到这个plunkr为一个工作的例子：http://plnkr.co/edit/r524cP6OAOBBzDReLNw4?p=preview

Answer 2

有2种方法可以做到这一点。

创建一个使用客户对象并连接First和Lastname的指令。

angular.module('customer.directives',[]). 
    .directive('customerName', function() { 
     restrict : 'EA', // both element and attr will work in case you are using a customer directive 
     replace : true, 
     scope : { 
      Customer : '=' 
     }, 
     template : '{{Customer.FirstName}} {{Customer.Lastname}}' 
}); 

调用示例：

<div ng-repeat="Customer in Customers"> 
    <customer-name='Customer'></customer-name> 
</div> 

或者你可以使用里面的CustomerService一个函数来发送你的控制器的全名已经连接在一起。

例：

angular.module('Customer.Services', []) 
    .factory('CustomerService', function(){ 
     return { 
     /* other methods here */ 
     getFullName : function(Customer) { 
     return Customer.FirstName + ' ' + Customer.LastName 
     } 
    } 
}); 



angular.module('Customer.Controllers', []) 
    .controller('CustomerController', function($scope.CustomerService) { 

     $scope.service = CustomerService.query(); 

     $scope.getFullName = fucntion(customer) { 
      return CustomerService.getFullName(customer); 
     } 
    } 
) 

里调用：

<div ng-repeat="Customer in Customers"> 
    {{getFullName(Customer)}} 
</div>