Question

我正在尝试动态创建模板。当我通过directives属性注入硬编码值时，它工作正常。但是当我使用角度变量分配它时它似乎不起作用。以下是js代码

public class CostAccouting
{
        public int Id { get; set; }
        public decimal? Total { get; set; }
        public int CostCategoryId { get; set; }
        public CostCategory CostCategory { get; set; }
}

这是html部分

(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
  name: 'Naomi',
  address: '1600 Amphitheatre'
};
$scope.nameTempl = 'customer-name.html';
$scope.addressTempl = 'customer-address.html';
}])
.directive('myCustomer', function() {
return {
  templateUrl: function(elem, attr){
    return attr.type;
  }
};
});
})(window.angular);

如果我直接使用值，而不是使用变量，它似乎工作正常。

我不明白为什么会这样？ Plunker code

Answer 1

你的问题是角度先处理模板然后处理DOM。因此，当他到达attr.type时，它仍然是{{nameTemp1}}，angular已经操纵了DOM。我的建议是，尝试以另一种方式传递地址。 This plunker显示了如何尝试创建一个包含对象的服务，然后将url绑定到该对象。然后，将服务注入指令并使用url。只要确保在指令上放置“ng-if”，检查范围是否已创建该对象并将其绑定到服务的对象

这是服务

service('service', [function() {
    return {
      template: {}
    };
  }])

这是控制器：

controller('Controller', ['$scope', 'service', function($scope, service) {
    $scope.customer = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };
    $scope.addressTempl = 'customer-address.html';
    service.template.url = $scope.addressTempl;

  }])

，指令如下：

directive('myCustomer', function(service) {
    return {
      templateUrl: function(elem, attr){
        return service.template.url;
      }
    };
  })

Answer 2

您可以使用以下不同的模板：

plunker上的实例。

(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
  $scope.nameTempl = 'customer-name.html';
  $scope.addressTempl = 'customer-address.html';
}])
.directive('myCustomer', function() {
  return {
    scope: {
      type: "@",
      customer:"=myCustomer",
    },
    template: '<div ng-include="type"></div>'
  };
});
})(window.angular);

和html部分

<body ng-app="docsTemplateUrlDirective">
  <div ng-controller="Controller">
   <div my-customer="customer" type="{{nameTempl}}"></div>
   <div my-customer="customer" type="{{addressTempl}}"></div>
  </div>
</body>

Answer 3

您无法访问templateURL函数中的作用域，但是有一种方法可以在运行时加载模板。 Plunker - http://plnkr.co/edit/n20Sxq?p=preview

app.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
        return {
            restrict: 'A',
            link: function(scope , element, attrs) {

              scope.$watch(attrs.template, function (value) {
                if (value) {
                  loadTemplate(value);
                }
              });

              function loadTemplate(template) {
                  $http.get(template, { cache: $templateCache })
                    .success(function(templateContent) {
                      element.replaceWith($compile(templateContent)(scope));                
                    });    
              }
            } 
        }
    }]);

希望这可以解决您的问题。

动态创建指令模板

3 个答案: