如何动态地从控制器改变指令templateUrl [英] How to dynamically change templateUrl of directive from controller

问题描述

我想通过templateUrl从控制器ServerControllerapp_modal指令，这样同一个指令可以被用于具有不同模板，不同情态动词。所以我已包括URL作为其在server_group.html视图用于应用模态标签的属性。而我从返回指令的templateUrl属性，网址。但它抛出下面的错误 -

 类型错误：无法读取的未定义的属性'协议'
在urlIsSameOrigin（HTTP：//本地主机/ JS /：30578：17）
在$ HTTP（HTTP：//本地主机/ JS /：24316：23）
。在功能$得到$ HTTP（匿名函数）（HTTP：//本地主机/ JS /：24533：18）。
在compileTemplateUrl（HTTP：//本地主机/ JS /：23130：13）
在applyDirectivesToNode（HTTP：//本地主机/ JS /：22755：24）
在compileNodes（HTTP：//本地主机/ JS /：22354：15）
在compileNodes（HTTP：//本地主机/ JS /：22366：15）
在编译（HTTP：//本地主机/ JS /：22287：15）
在编译（HTTP：//本地主机/ JS /：38714：15271）
 

指令模态 -

  angular.module（应用程序）    .directive（appModal功能（）{
        返回{
            限制：E，
            更换：真实，
            范围： {
                模式：= modalBody
            }，
            templateUrl：功能（元素，ATTRS）{
                返回attrs.templateUrl;
            }
        };    }）;
 

控制器 -

 函数ServerController（$范围）{    $ scope.confirmDelete = {        身体：你确定要删除？，
        primaryBtn：删除，
        取消：取消，
        templateUrl：页/ DRaaS /应用/的ServerGroup /谐音/ app_modal.html    };
 

}

HTML -

 ＆LT;应用模态模体=confirmDeletetemplateUrl =页/ DRaaS /应用/的ServerGroup /谐音/ app_modal.html＆GT;＆LT;应用模态＆GT;
 

解决方案

在 templateUrl 函数运行，范围不可用，属性值仍然没有插值。所以，如果你有这样的：

 ＆LT;富参数={{一}}＆GT;＆LT; / foo的＆GT;
 

然后在 templateUrl 你会得到字符串{{一}}为 attrs.param - 而不是价值 $ scope.a

相反，你需要接受模板URL作为一个变量（通过隔离的范围最好）的指令。该指令在里面你可以使用廉价的 NG-包括绑定到该值。

  .directive（appModal功能（）{
  返回{
    限制：E，
    更换：真实，
    范围： {
      模式：= modalBody
    }，
    模板：'＆LT; D​​IV NG-包括=modal.templateUrl＆GT;＆LT; / DIV＆GT;'
  };
}）;
 

的使用是按照你的建议：

 ＆LT;应用模态模体=confirmDelete＆GT;＆LT; /应用模态＆GT;
 

和控制器：

  $ scope.confirmDelete = {
  //其它性质，
  templateUrl：路径/要/ template.html
}
 

I want to pass the templateUrl for app_modal directive from controller "ServerController" so that the same directive can be used for different modals having different template. So i have included the url as the attribute for "app-modal" tag which is used in the server_group.html view. And i am returning that url from templateUrl property of directive. But it is throwing the below error -

TypeError: Cannot read property 'protocol' of undefined
at urlIsSameOrigin (http://localhost/js/:30578:17)
at $http (http://localhost/js/:24316:23)
at Function.$get.$http.(anonymous function) (http://localhost/js/:24533:18)
at compileTemplateUrl (http://localhost/js/:23130:13)
at applyDirectivesToNode (http://localhost/js/:22755:24)
at compileNodes (http://localhost/js/:22354:15)
at compileNodes (http://localhost/js/:22366:15)
at compile (http://localhost/js/:22287:15)
at compile (http://localhost/js/:38714:15271)

Directive for Modal -

 angular.module("app")

    .directive("appModal", function() {
        return {
            restrict: "E",
            replace: true,
            scope: {
                modal: "=modalBody"
            },
            templateUrl: function(element, attrs) {
                return attrs.templateUrl;                  
            }                
        };

    });

Controller -

function ServerController($scope) {

    $scope.confirmDelete = {

        body: "Are you sure you want to delete?",
        primaryBtn: "Delete",
        cancel: "Cancel",
        templateUrl: "pages/DRaaS/app/ServerGroup/partials/app_modal.html"

    };

}

Html -

<app-modal modal-body="confirmDelete" templateUrl="pages/DRaaS/app/ServerGroup/partials/app_modal.html"><app-modal>

解决方案

When the templateUrl function runs, the scope is not available and the attribute values are still not interpolated. So, if you have something like:

<foo param="{{a}}"></foo>

then in templateUrl you will get the string "{{a}}" for attrs.param - not the value of $scope.a.

Instead, you'd need to accept the template url as a variable (ideally via isolated scope) to the directive. Inside the directive you could cheaply use ng-include bound to that value.

.directive("appModal", function() {
  return {
    restrict: "E",
    replace: true,
    scope: {
      modal: "=modalBody",
    },
    template: '<div ng-include="modal.templateUrl"></div>'
  };
});

The usage is as you suggest:

<app-modal modal-body="confirmDelete"></app-modal>

And in the controller:

$scope.confirmDelete = {
  // other properties,
  templateUrl: "path/to/template.html"
}

这篇关于如何动态地从控制器改变指令templateUrl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！