标签: angularjs-ng-include

我打算在具有不同控制器的多个视图中使用一个模板.

但是现在我意识到我不能只在模板中编写通用绑定,因为值会放在里面$scope.concreteControllerName.

ngInclude的 Angular文档说明了这一点

该指令创建新范围.

我可以使用ng-init指令并将控制器实例传递给模板的范围:

<ng-include src="..." ng-init="controller=concreteControllerName"/> 

甚至更好

<ng-include src="..." ng-init="model=getModelForTemplate()"/>

然后写入{{controller.boundvalue}}模板.

我猜这是一个有效的解决方案.

在这里,我想知道是否存在其他更好的方法,如果不存在,模板是否应该与传递模型的一些概念一起使用以从父范围中抽象出来？

我正在考虑一些小部件并且$watch表达式完美地将所有内容都放在一个文件中但是现在我将相关的控制器部分移动到一个新的控制器中并将标记转换为一个新的html并且$watch在初始化之后只发生一次但是在编辑键入时没有相关输入.

JS:

app.controller('getRecipientWidgetController', [ '$scope', function($scope) {
    console.log("controller initializing")
    var testReceivingAddress = function(input) {
        console.log("change detected")
    }
    $scope.$watch("addressInput", testReceivingAddress)
} ])

包装器的HTML:

<ng-include
    src="'partials/getRecipientWidget.html'"
    ng-controller="getRecipientWidgetController"
    ng-init="recipient=cert"> <!-- ng-init doesn't influence the bug. -->
</ng-include>

HTML partials/getRecipientWidget.html:

<md-text-float ng-model="addressInput"></md-text-float>

我怀疑有一些范围伏都教正在进行中？我离开了ng-init以明确我想要实现的目标:构建一个明显更复杂,可重用的小部件,在这个实例中可以$scope.cert作为它recipient.

我是angularjs的新手，我对ng-include和$ state.includes之间的混淆不大。谁能建议我为什么我们使用$ state.includes而不是ng-include指令？

实例:http://plnkr.co/edit/wWS3UFB3IZ0cAI4u2x04?p=preview

单击"打开模态1"时,将引发以下错误:

错误:找不到Dialog.open预期模板或templateUrl.使用选项或open方法指定它们.

但是,不使用的Modal 2 ng-include工作正常.

此外,如果ui-bootstrap-tpls-0.1.0.js包括而不是ui-bootstrap-tpls-0.2.0.js,所有工作正常.

有任何想法吗？

我将我的模板预先加载到一个javascript字符串数组中,就像var t = JST['firstTemplate']在哪里t一样,

<div>This scope has a value of {{value}}</div>

如何在ng-include指令中使用此预加载的模板？

请注意,此场景中的模板可能更复杂,可能具有嵌套视图和模板以及它们自己的嵌套作用域和控制器.所以我不确定任何ng-bind指令是否有帮助？

更新:

查看ng-include它的来源似乎是一种很好的方法,可以将模板加载逻辑解耦为可自定义的提供程序.

当前的默认加载机制只是做了$http.get与$templateCache作为缓存提供者.看起来我可以将模板内容注入JST['firstTemplate']到模板缓存中,但是我必须在启动时为每个模板执行此操作.

$templateCache.put('firstTemplate', JST['firstTemplate']);

然后有,

<div ng-include="firstTemplate"></div>

我还可以编写一个与每个ng-include并排的自定义指令,它以某种方式预先缓存模板.这再次显得笨重.

更新#2

我将尝试重写templateCache,以便它使用我已经预先加载的JST哈希.如果有效,将发布结果.

我正在尝试包含一个标题,使用Angular中的ng-include到我的Jade模板中:

doctype html
html(lang="en")
    head
        meta(charset='UTF-8')
        meta(name='fragment', content='!')
        base(href='/')
        title Node Express Angular
        link(rel='stylesheet', href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css')
        link(rel='stylesheet', href='/css/syle.css')
    body(ng-app='myApp')
        ng-include(src='\'/partials/header.jade\'')
        div.container
            div.jumbotron.text-center
                h1 Home Page
                p This page is a draft in progress
        script(src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js')
        script(src='//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js')
        script(src='/js/app.js')

header.jade中的文本如下:

nav.navbar.navbar-inverse(role='navigation')
ul.nav.navbar-nav.navbar-header
    li
        a(src='/home', class='navbar-brand') Home
    li
        a(src='/about') About
    li
        a(src='/login') Login
    li
        a(src='/register') Register

我曾经尝试都ng-include(src='\'/partials/header.jade\'')和div(ng-include='\'/partials/header.jade\'')

在Chrome开发者控制台中,第一个导致结果,<!--ng-Include: undefined -->第二个导致:<!-- ng-Include: '/partials/header.jade' -->

有线索吗？

我正在通过ng-view内的有角度路径加载一个html页面.我正在加载的页面包含一个ng-include标记,指向另一个html文件.

我尝试了以下所有语法=

<div ng-include src="'some.jsp'"></div>
<div ng-include="'login.jsp'"></div>
<div ng-include src="include.url"></div>

没有工作.但是,如果我在ng-view之外放置相同的标签,它的工作正常.

我究竟做错了什么？

使用 .html 包含 html 文件时出现以下错误ng-include。

XMLHttpRequest cannot load file:///home/algo/Dnyaneshwar/Angular/TestProject/views/header1.html. 
Cross origin requests are only supported for protocol schemes: 
http, data, chrome, chrome-extension, https, chrome-extension-resource.

我正在使用AngularJS在我的网络应用程序中"包含"html部分.我正在使用嵌套ng-include.

我最外面也有动画ng-include.一切正常.唯一的问题是ng-include首先加载外部模板.然后,包含的HTML文件也有一个ng-include也加载HTML文件.

最后包含的HTML文件导致div突然扩大,这使得动画看起来很神奇.

如果所有嵌套ng-includes都可以以某种方式预加载,则可以解决此问题.在AngularJS中是否可以这样？

我的代码看起来像这样:

我的主要观点:

<div class="animation-grow-in animation-grow-out" ng-repeat="myList">
  <div ng-include"base-partial.html"></div>
</div>

base-partial.html文件:

<div ng-switch="myList.type">
  <div ng-switch-when="file1">
    <div ng-include="'file1.html'"></div>
  </div>
  <div ng-switch-when="file2">
    <div ng-include="'file2.html'"></div>
  </div>
</div>

在file1.html和file2.html包含的形式.

但是因为filex.html加载了延迟使得它看起来都很蠢.那么这个问题有解决方案吗？我可以预加载所有嵌套的ng-includes吗？

我想使用ng-include来渲染模板的侧边栏.该模板需要jQuery metisMenu插件用于下拉列表.

问题:插件仅在我在部分模板'sidebar.html'中加载以下脚本时才有效:

<script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/1.1.0/metisMenu.js"></script>

<script>$(function() {
    $('#side-menu').metisMenu();
});</script>

和失败当我尝试加载它们里面的index.html.

我想在index.html中只加载一次插件,因为我也可能在其他部分中需要它.这是一个工作模型的Plunker,它需要在partials中加载脚本.请注意,在将脚本从sidebar.html移动到index.html时,下拉菜单会停止工作.

任何帮助,将不胜感激.提前致谢.