angularjs 1.5 覆盖 templateUrl

Question

对于像下面这样的指令，有没有办法覆盖 'templateUrl' 属性以便可以使用 myTemplate1.tpl.html myTemplate2.tpl.html？这是因为该指令已经在其他地方使用过，但是对于新的需求，不能使用当前模板。

angular.module("myDirective", [])
    .directive("myDirective", [function () {
    "use strict";

    return {
        restrict: "E",
        replace: true,
        scope: {
            "property1": "=",
            "property2": "="
        },
        templateUrl: "web-url/myTemplate1.tpl.html"
    };
}]);

Answer 1

如果你可以编辑指令代码本身，你可以这样做：

angular.module("myDirective", [])
    .directive("myDirective", [function () {
    "use strict";

    return {
        restrict: "E",
        replace: true,
        scope: {
            "property1": "=",
            "property2": "="
        },
        templateUrl: function(element, attrs) {
            // default to 'old' template
            // only use other template if passed through the 'template-url' attribute
            return attrs.templateUrl || "web-url/myTemplate1.tpl.html";
        }
    };
}]);

这样你所有的旧指令用法仍然有效，你可以这样配置它：

<!-- Still uses web-url/myTemplate1.tpl.html -->
<my-directive></my-directive>

<!-- Uses some/other/template/url.html -->
<my-directive template-url="some/other/template/url.html"></my-directive>

Answer 2

可能像下面这样尝试：

angular.module("myDirective", [])
    .directive("myDirective", [function () {
    "use strict";

    return {
        restrict: "E",
        replace: true,
        scope: {
            "property1": "=",
            "property2": "="
        },
        templateUrl:  function(elem, attr) {
            return 'web-url/myTemplate'+ attr.urlnum+'.tpl.html';
         }
    };
}]);

angularjs 1.5 覆盖 templateUrl

angularjs 1.5 override templateUrl

code-reuse

angularjs

angularjs-directive