天道酬勤,学无止境

修改 ng-include 指令(modifying ng-include directive)

问题

如果我在某个自定义位置托管一个eg http://localhost/collosys应用程序, eg http://localhost/collosys那么我必须将所有 ng-include 更改为所有地址的“/collosys/”,因为我使用的是绝对地址来引用任何 html 文件。

这就是我目前的做法

<script>
    var baseUrl = document.location.pathname;
    document.write('<base href="' + document.location.pathname + '" />');
</script>

然后重写 ng-include 标签

FROM: <div data-ng-include="'/Generic/csgrid/grid-buttons.html'"></div>
TO: <div data-ng-include=" baseUrl + 'Generic/csgrid/grid-buttons.html'"></div>

我可以修改 ng-include 标签本身,以便它可以使用托管地址作为所有地址的前缀

编辑

我在某处读到 angularjs 指令是可扩展的,有没有关于如何扩展 angularjs ngInclude 指令的例子? 有例子吗??

回答1

我使用 $httpProvider.interceptors 解决了这个问题。 以下将“myAppDirectory”添加到所有请求。

$httpProvider.interceptors.push(function($q) {
    return {
     'request': function(config) {
         config.url = 'myAppDirectory/'+config.url;
         return config;
      },
    };
  });

常规的 ng-include,例如:

<div ng-include="'user/info.html'">

将加载myAppDirectory /user/info.html

您可能想要做一些例外。 就我而言:

  $httpProvider.interceptors.push(function() {
    return {
     'request': function(config) {
         // ignore api calls and ui-bootstrap templates.
         if (config.url.indexOf('api')==-1 && config.url.indexOf('template')==-1) {
           config.url = 'myAppDirectory/'+config.url;
         }
         return config;
      },
    };
  });
回答2

如前所述,您有多种选择:

  1. 更改 angular 源代码(也称为猴子补丁) - 不推荐,需要大量维护,并使您的代码对其他人不可读。

  2. 使用装饰器,它允许您获取 ngInclude 指令并对其进行更改。 装饰器通常用于扩展\更改 3rd 方库,但缺点是您必须替换 ngInclude 的整个编译函数,大约 60 行以换取一点前缀。 更不用说如果 angular 改变了 ngInclude 的工作方式,你将使用它的一个废弃或损坏的版本。

  3. 编写您自己的包装指令,它将调用 ngInclude。 从现在开始,您将拥有 myInclude:

     angular.module('myApp').directive('myInclude', [function () { var baseUrl = 'collosys'; return { replace: true, scope: { myInclude: '@' }, template: '<div ng-include="' + baseUrl + '{{myInclude}}"></div>' }; }]);
回答3

是的,你可以,但我会写我自己的 ng-include。 如果您尝试升级 angular,您将简单地覆盖您的更改。

回答4

修改标记中的head标签:

<head>
  <base href="collosys" />
</head>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何在AngularJS中为ngInclude指令指定模型?(How to specify model to a ngInclude directive in AngularJS?)
    问题 我想在3个地方使用相同的HTML模板,只是每次使用不同的模型。 我知道我可以从模板访问变量,但是名称会有所不同。 有没有办法将模型传递给ngInclude? 这就是我想要实现的,当然,add-variable属性现在不起作用。 然后,在我包含的模板中,我将访问detailsObject及其属性。 <pane title="{{projectSummary.ProjectResults.DisplayName}}"> <h2>{{projectSummary.ProjectResults.DisplayName}}</h2> <ng-include src="'Partials/SummaryDetails.html'" init-variable="{'detailsObject': projectSummary.ProjectResults}"></ng-include> </pane> <pane title="Documents" header="true"></pane> <pane ng-repeat="document in projectSummary.DocumentResults" title="{{document.DisplayName}}"> <h2>{{document.DisplayName}}</h2> <ng-include src="
  • 如何获得ng-include指令以与内容分发网络一起使用?(how do I get ng-include directive to work with a Content Delivery Network?)
    问题 是否可以使ng-include指令与CDN一起使用? 在这种情况下: <div ng-include='http://cdn.somewebsite.com/templates/home.tpl.html'></div> somewebsite.com的cdn子域通过DNS / CName映射到内容传递网络。 但是,在加载主站点somewebsite.com时,它不会呈现模板。 我想在内部将其视为跨域调用。 是否有任何变通方法可以将Angular模板托管在第三方CDN上并与本地域一起使用? 回答1 是的,您是对的-问题出在跨域调用。 官方文档说: 默认情况下,模板URL限制为与应用程序文档相同的域和协议。 这可以通过在其上调用$ sce.getTrustedResourceUrl来完成。 要从其他域或协议中加载模板,您可以将其列入白名单或将其包装为受信任的值。 请参阅Angular的严格上下文转义。 和 请注意:浏览器的“相同来源策略”和“跨域资源共享(CORS)”策略除此以外还适用,并且可能进一步限制模板是否成功加载。 这意味着,如果没有正确的CORS策略,则无法在所有浏览器上都无法从其他域加载模板。 例子: angular.module('myApp', []).config(function($sceDelegateProvider) {
  • 角度指令不同的模板(Angular Directive Different Template)
    问题 我有一个带有变量类型的指令myDirective。 如果我运行<my-directive type="X">我希望该指令使用templateUrl:x-template.html。 如果执行<my-directive type="Y">我希望该指令使用templateUrl:y-template.html。 这是我当前的指令。 app.directive('myDirective', function() { var myDirective = { templateUrl: 'X-template.html', restrict: 'E', scope: { type: '=' }, }; return myDirective; }); 我通过stackoverflow和angular文档阅读,但没有找到我需要的任何东西。 我现在正在尝试按照以下方式进行操作: if ($scope.type === 'X') { templateUrl: 'X-template.html', } else if ($scope.type === 'Y') { templateUrl: 'Y-template.html', } 但是不知道在哪里做。 你们知道这是否可行吗? 回答1 您可以使用compile内部的ng-include来解决此问题: app.directive(
  • 用模板替换ng-include节点?(Replace ng-include node with template?)
    问题 刚大的角度。 是否可以用包含的模板的内容替换ng-include节点? 例如,使用: <div ng-app> <script type="text/ng-template" id="test.html"> <p>Test</p> </script> <div ng-include src="'test.html'"></div> </div> 生成的html是: <div ng-app> <script type="text/ng-template" id="test.html"> <p>Test</p> </script> <div ng-include src="'test.html'"> <span class="ng-scope"> </span> <p>Test</p> <span class="ng-scope"> </span> </div> </div> 但是我想要的是: <div ng-app> <script type="text/ng-template" id="test.html"> <p>Test</p> </script> <p>Test</p> </div> 回答1 我遇到了同样的问题,但仍然希望ng-include的功能包括动态模板。 我正在构建一个动态的Bootstrap工具栏,我需要更清洁的标记才能正确应用CSS样式。
  • 重命名ng-include中的变量(renaming a variable in ng-include [duplicate])
    问题 这个问题已经在这里有了答案: AngularJS-如何用变量渲染局部变量? (3个答案) 4年前关闭。 这是相关的html: <ng-include src="'app/views/order.html'"></ng-include> 嵌套在此ng-include范围内的是一个贸易变量。 贸易变量如下所示: var trade = { order: {} } 问题在于order.html期望的是订单变量而不是trade.order 如何调用ng-include并将trade.order作为order传递? 回答1 ng-include读取全局范围内的变量。 您不能使用它。 它不会工作。 并且不要使用onload因为它会乱扔全局范围。 更清洁的解决方案是制定新的通用指令 这是理想的用法: <div ng-include-template="'app/views/order.html'" ng-include-variables="{ order: trade.order }"></div> 该指令是: .directive( 'ngIncludeTemplate' () -> { templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate restrict: 'A' scope: { 'ngIncludeVariables': '
  • 角度传递范围到ng-include(Angular passing scope to ng-include)
    问题 我有一个编写的控制器,可在我的应用程序中的多个位置使用ng-include和ng-repeat ,如下所示: <div ng-repeat="item in items" ng-include="'item.html'" ng-controller="ItemController" ></div> 在控制器/模板中,我希望item值存在,并且整个事情都是围绕这个想法建立的。 现在,尽管如此,我需要以稍微不同的方式使用控制器,而无需使用ng-repeat ,但仍然需要能够传递item 。 我看到ng-init并认为它可以满足我的需要,例如: <div ng-init="item = leftItem" ng-include="'item.html'" ng-controller="ItemController" ></div> <div ng-init="item = rightItem" ng-include="'item.html'" ng-controller="ItemController" ></div> 但这似乎不起作用。 任何人都有任何想法如何在这样的单个实例中为范围传递变量? 编辑:在此上方的控制器正在加载leftItem和rightItem值,如下所示: .controller('MainController', function($scope
  • angularjs - 将 ng-include 指向包含脚本指令的部分(angularjs - Point ng-include to a partial that contains a script directive)
    问题 这是对原始问题的编辑: 当使用ng-include指令在所有页面上重用我的标题 HTML 时,加载/呈现顶部导航栏会有轻微的延迟。 为了缓解这个问题,我试图将ng-include指向一个包含<script type='text/ng-template' id='header.html>...</script>的 header.html 文件,以便它预加载部分。 但我似乎无法让它发挥作用。 我只在将 header.html 的内容直接粘贴在 index.html 中时才取得成功,这违背了重用标头代码的目的。 脚本的文档仅给出了使用内联模板的示例,而 ngInclude 的文档在示例模板中没有使用script 。 ngInclude可以加载使用 angular script指令的文件吗? 索引.html: <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <title>Testing</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/custom.css"> <script src='lib/angular/angular.js'></script> <script src='js/main
  • 同一页上有不同的ng-include:如何向每个变量发送不同的变量?(Different ng-include's on the same page: how to send different variables to each?)
    问题 我的AngularJS应用程序中有一个页面,我想在其中包含相同的html部分,但具有不同的变量。 如果我在我的主要html这样做: <div id="div1" ng-include src="partials/toBeIncluded.html onload="var='A'"> <div id="div2" ng-include src="partials/toBeIncluded.html onload="var='B'"> 而且toBeIncluded.html看起来像 <div>{{var}}</div> 两个div看起来都像 <div id="div1"><div>B</div></div> <div id="div2"><div>B</div></div> 我猜想这与ng-includes需要调用相同的onload有关。 那么,如何将不同的变量发送到每个不同的include? 回答1 每次加载新的部分时,传递给onload的表达式都会求值。 在这种情况下,您将两次更改var的值,因此在加载两个部分时,当前值将为B 您想将不同的数据传递到每个部分/模板(基础html文件是相同的)。 如Tiago所述,要实现此目的,您可以使用不同的控制器来实现。 例如,考虑以下 <body ng-controller='MainCtrl'> <div ng-include src=
  • AngularJS中范围原型/原型继承的细微差别是什么?(What are the nuances of scope prototypal / prototypical inheritance in AngularJS?)
    问题 “ API参考范围”页面显示: 范围可以从父范围继承。 开发人员指南范围页面显示: 范围(典型地)从其父范围继承属性。 那么,子作用域是否总是从原型上继承自其父作用域? 有例外吗? 当它继承时,是否总是正常的JavaScript原型继承? 回答1 快速解答: 子作用域通常是从其父作用域继承的,但并非总是如此。 该规则的一个例外是带有scope: { ... }的指令scope: { ... } -这会创建一个“隔离”范围,该范围不会被原型继承。 创建“可重用组件”指令时,经常使用此构造。 对于细微差别,作用域继承通常是直截了当的……直到您需要在子作用域中进行2路数据绑定(即,表单元素,ng-model)。 如果您尝试从子作用域内部绑定到父作用域中的原语(例如,数字,字符串,布尔值),则Ng-repeat,ng-switch和ng-include可能会使您绊倒。 它无法像大多数人期望的那样工作。 子作用域具有其自己的属性,该属性隐藏/阴影相同名称的父属性。 您的解决方法是 在模型的父级中定义对象,然后在子级中引用该对象的属性:parentObj.someProp 使用$ parent.parentScopeProperty(并非总是可能,但比1.容易) 在父作用域上定义一个函数,然后从子作用域调用它(并非总是可能的) 新的AngularJS开发人员通常不会意识到ng
  • Angular.js指令动态模板URL(Angular.js directive dynamic templateURL)
    问题 我在routeProvider模板中有一个自定义标记,该标记要求使用directive模板。 version属性将由范围填充,然后需要正确的模板。 <hymn ver="before-{{ week }}-{{ day }}"></hymn> 根据赞美诗的星期和日期,它有多种版本。 我预计将使用该指令来填充正确的.html部分。 templateUrl不会读取该变量。 emanuel.directive('hymn', function() { var contentUrl; return { restrict: 'E', link: function(scope, element, attrs) { // concatenating the directory to the ver attr to select the correct excerpt for the day contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html'; }, // passing in contentUrl variable templateUrl: contentUrl } }); 摘录目录中有多个文件,标记为before-1-monday.html , before-2-tuesday.html … 回答1 您可以使用ng
  • 停止AngularJS插入使用ng-include(Stop AngularJS inserting <span class=“ng-scope”></span> using ng-include)
    问题 我使用的是Foundation布局框架,该框架会自动将.column的最后一个兄弟.column到右侧,我真的很欣赏这种行为。 但是,AngularJS会自行在每个div.column之后插入span.ng-scope ,这会导致浏览器将最后一个span视为.column的最后一个同级(即使不是)。 专门负责此的Foundation中的CSS是: [class*="column"] + [class*="column"]:last-child { float: right; } 据我了解, [attribute*="substring"]应该仅选择匹配的兄弟姐妹,因此,对于以上内容,仅选择其class属性包含column元素(包括columns )。 我认为不包含column的class属性的span标签应该不匹配(因而被:last-child忽略)。 但是,事实似乎并非如此。 无论如何,跨度是造成问题: Angular Bugging它(jsfiddle) 在没有Angular的情况下可以正常工作(相同的jsfiddle,没有 ) 有没有一种方法可以配置角度来停止插入那些span标签? 我会不情愿地修改css选择器,以某种方式忽略所有span标签; 但是,我最终可能需要/想要使用span标签。 回答1 由于您指示div可以在内部移动,因此可以这样做: <ng-include
  • onLoad和ng-init之间在角度上的区别(Difference between onLoad and ng-init in angular)
    问题 我正在学习有角度的。 我不明白onLoad和ng-init之间的变量初始化有什么区别。 它在哪个范围内创建此变量。 For example <ng-include onLoad="selectedReq=reqSelected" src="'partials/abc.html'"></ng-include> OR <ng-include ng-init="selectedReq=reqSelected" src="partials/abc.html"></ng-include> 也请给我一些关于隔离范围的想法。 回答1 ng-init是可以放置在div , span内的指令,而onload是专门用作ng-init的ng-include指令的属性。 要了解我的意思,请尝试以下操作: <span onload="a = 1">{{ a }}</span> <span ng-init="b = 2">{{ b }}</span> 您会看到只有第二个出现。 隔离范围是一个原型,它不从其父范围继承。 用外行的术语来说,如果您有一个小部件不需要任意读写父作用域,则可以在该小部件上使用隔离作用域,以便该小部件和小部件容器可以自由使用它们的作用域而不会覆盖彼此的属性。 回答2 从angular的文档中, ng-init不应用于任何初始化。 它仅应用于别名。 https://docs
  • Angular JS - 如何处理重复的 HTML 代码,如页眉/页脚?(Angular JS - How to handle duplicated HTML code like headers/footers?)
    问题 我刚刚阅读了 Angular JS 的介绍,但我没有看到任何关于只编写一次 HTML 页眉代码和页脚代码并将其包含在所有页面中的方法。 有没有官方/推荐的方法来做到这一点? 回答1 官方的做法是使用 ngInclude 指令,该指令"fetches, compiles and includes an external HTML fragment". <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> <div ng-include src="'header.url'"></div> ... <div ng-include src="'footer.url'"></div> </body> </html> 有了这个,您可以在所有页面中重复使用相同的header.url和footer.url 。 回答2 如果您正在创建单页 Web 应用程序(例如,使用 $routeProvider 带有可收藏的视图/页面),您可以将页眉和页脚直接放入 index.html(或使用 ng-include),然后使用 ng-view 进行切换视图/页面之间: <html ng-app> <head> <script src="http:/
  • ng-include不适用于脚本类型=“ text / ng-template”(ng-include not working with script type=“text/ng-template”)
    问题 这是我的柱塞: http://plnkr.co/edit/oIei6gAU1Bxpo8VUIswt 单击该按钮后,应在“ Hello World!”之前插入以下内容。 跨度: <script type="text/ng-template" id="tempTest"> <div> <span>Properly Inserted</span> </div> </script> 减去脚本标签,当然。 我是通过动态插入以下div来实现的: <div ng-include="tempTest"></div> 然后进行编译。 但是,如果您查看日志,则编译后剩下的唯一内容是: <!-- ngInclude: tempTest --> 这里发生了什么? 为什么我的插入内容无法正确编译? 逻辑如下: $scope.insert = function(){ // Create elements // var container = angular.element('<div id="compiled-container"></div>'); var element = angular.element('<div ng-include="tempTest"></div>'); //Insert parent Container $('#greeting').before(container);
  • modifying ng-include directive
    if I host an angular app at some custom location e.g. http://localhost/collosys then i have to change all the ng-include to have "/collosys/" for all the addresses, given that i am using absolute address for referring to any html file. this is how i am doing that currently <script> var baseUrl = document.location.pathname; document.write('<base href="' + document.location.pathname + '" />'); </script> and then in rewrite ng-include tag FROM: <div data-ng-include="'/Generic/csgrid/grid-buttons.html'"></div> TO: <div data-ng-include=" baseUrl + 'Generic/csgrid/grid-buttons.html'"></div> Can i
  • 如何从父范围检查包含ng的表单的有效性?(How can I check an ng-included form's validity from the parent scope?)
    问题 我有一个子窗体,可在我的应用程序的多个视图之间共享。 在一个视图中,此子窗体单独显示,底部带有“上一步/继续”按钮,可将用户引导至下一个子窗体。 在另一个视图中,子窗体与其他子窗体(基本上是一个长格式)显示在同一页面上。 由于子窗体的html在两个视图中都是100%相同的,因此我将其分成了一部分,并使用ng-include进行渲染。 在仅显示带有“后退/继续”按钮的子表单的视图中,我在父级HTML内渲染“后退/继续”按钮。 从视觉上看,一切正常,并且我能够访问以表格形式输入的所有数据( user.email, user.password, user.etc... )。 问题是我根据用户是否正确填写了表单来启用/禁用“继续”按钮,并且这在“仅子表单”变体中不起作用,因为父作用域似乎无法能够访问表单的状态。 如果我将按钮粘贴在部分中,则可以使用,但是我不想这样做,因为在使用该部分的每个实例中,按钮并不都属于那里。 JSFiddle示例 请注意,在我的示例中,红色框内的“提交”按钮被禁用,直到在框中键入内容并且“表单无效?”。 值更新,而蓝色边框内的按钮始终处于启用状态,并且“表单无效?” 值是空白。 如何从父范围访问myForm.$invalid的值? 回答1 如果它是子表单,则可以将表单标签从子表单移到主表单中:更新后的JSFiddle 您还可以使用ngForm指令嵌套表单:
  • 如何动态构建 ng-include src?(How do I dynamically build an ng-include src?)
    问题 我有以下代码: <div ng-repeat="module in modules" id="{{module.Id}}"> <ng-include ng-init="bootstrapModule(module.Id)" src=""></ng-include> </div> 我希望能够在 src 中构建一个字符串,如下所示: /modules/{{module.Name}}/{{module.Name}}.tpl.html 但我一直在遇到障碍。 我尝试使用回调函数来构建它, $scope.constructTemplateUrl = function(id) { return '/modules/' + id + '/' + id + '.tpl.html'; } 但这被一遍遍地调用,它似乎不喜欢那样。 我也试过像这样构造它: ng-src="/modules/{{module.Id}}/{{module.Id}}.tpl.html" 但这也行不通。 我没有花几个小时在灌木丛中跳动,而是想知道是否还有其他人遇到过这样的事情并且有任何想法? 此外,当我从 $resource 中获取模块时,我将它们与 $q 异步返回,因此我似乎无法在控制器中之前通过并将其添加到模块中,因为$scope.modules仅等于一个then函数那一点。 有任何想法吗? 回答1 ngInclude
  • Angular JS-单击按钮即可从指令中加载模板html(Angular JS - Load a template html from directive on click of a button)
    问题 单击链接时,我试图加载HTML模板。 我做了一个包含templateUrl的指令,该指令可加载HTML文件。 单击链接时,我将调用带有自定义指令“ myCustomer”的div附加到index.html中已存在的div的函数。 我到目前为止所做的一切都显示在下面,但这是行不通的。 index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-example12-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-app="docsTemplateUrlDirective"> <div ng-controller="Controller"> <a href="#" ng-click="showdiv()">show</a> <div id="d"></div> </div> </body> </html> script.js (function(angular) { 'use
  • 零件和模板的复杂嵌套(Complex nesting of partials and templates)
    问题 我的问题涉及到如何处理AngularJS应用程序中模板的复杂嵌套(也称为partials )。 描述我的情况的最好方法是使用创建的图像: 如您所见,这有可能成为具有许多嵌套模型的相当复杂的应用程序。 该应用程序是单页的,因此它将加载index.html ,该索引包含DOM中具有ng-view属性的div元素。 对于第1圈,您看到有一个主导航将相应的模板加载到ng-view 。 我是通过将$routeParams传递给主应用程序模块来实现的。 这是我的应用程序中的一个示例: angular.module('myApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when("/job/:jobId/zones/:zoneId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/zone_edit.html' }). when("/job/:jobId/initial_inspection", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial
  • Angular2中templatURL中的动态模板(Dynamic template in templatURL in angular2)
    问题 每当必须在页面中动态包含模板时,我就一直在角度1中使用ng-include。 现在,如何在角度2中实现这一点。我尝试搜索并找到了这些: https://groups.google.com/forum/#!topic/angular/ROkKDHboWoA, https://github.com/angular/angular/issues/2753 有人可以在angular2中解释如何执行此操作,因为出于安全原因,该链接显示不包含ng-include。 或者至少如何在templateUrl属性中使用veriable,以便可以在服务器端处理veriable的值以提供模板... 回答1 正如您在Angular仓库中看到的那样,很可能我们不会得到该指令。 已经有很长的讨论,我们是否需要此指令,如果没有提供,我们如何自行实现。 我试图举一个简单的例子说明如何实现它。 @Component({ selector: 'my-ng-include', template: '<div #myNgIncludeContent></div>' }) export class MyNgInclude implements OnInit { @Input('src') private templateUrl: string; @ViewChild('myNgIncludeContent', {