如何嵌套角度表达式?

时间:2014-07-03 09:09:36

标签: angularjs

我想做一些类似于(在我的HTML中):

{{ Customer.Name }}

Customer.Name

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

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

我想要的是Angular以递归方式评估表达式。

2 个答案:

答案 0 :(得分:1)

有两种方法可以做到。

创建一个使用客户对象并连接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>

答案 1 :(得分:1)

您可以使用$eval的方法$scope()来实现此目的。

例如,您的Controller将定义您的客户对象:

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