标签: angularjs-ng-include

Angularjs - Charts.js:相同的图表元素不会在其他视图上重绘

我是angularjs的新手,试图创建我的第一个指令.我正在创建一个指令,将Charts.js2.0(beta)加载到我的应用程序中.

我有2个视图管理angular-route,两个html视图都包含一个仅包含charts-element的html页面.

问题是第一页正确绘制图表,当我转到其他视图时,图表div被加载但图表不会重新绘制.现在,如果我回到第一眼看到它的空白.

链接到Plunker

我做错了什么?我的指令有问题吗?

提前致谢.

charts angularjs angularjs-directive angularjs-ng-include chart.js

14
推荐指数
1
解决办法
1741
查看次数

在其他域的div中包含角度应用,不包含iframe

我有一个角度应用程序,它具有各种依赖项,如模块和样式.

另一方面,我有多个网站,我想在这个应用程序中包含所有依赖项(就像你在iFrame中一样).我希望将应用程序包含在div中(就好像它是iframe)但我必须是div,而不是iFrame,因此其他网站可以为内联应用程序选择自己的样式.

这样,当我将它添加到我的CORS时,我可以让每个站点都包含该应用程序.喜欢:

<div ng-include="app_from_other_domain"></div>
Run Code Online (Sandbox Code Playgroud)

随着该div内的所有路由.

在阅读了大量文档后,我不知道从哪里开始.任何帮助,将不胜感激!

javascript iframe angularjs angularjs-directive angularjs-ng-include

13
推荐指数
1
解决办法
1177
查看次数

AngularJS:ngInclude和动态URL

我正在使用该ngInclude指令来加载HTML片段.现在我正在寻找传递动态URL的最佳方法.我知道我可以使用字符串连接创建URL:

<ng-include src="'/foo/' + fooId + '/bar/' + barId + '/baz/' + bazId"></ng-include>
Run Code Online (Sandbox Code Playgroud)

在我眼里,这有点难看.

ngHref并且ngSrc例如,接受包含URL {{}}标记.恕我直言,这种语法更清晰:

<img ng-src="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/>
<a ng-href="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/>
Run Code Online (Sandbox Code Playgroud)

有没有更好的方法将动态URL传递给ngInclude?

angularjs angularjs-directive angularjs-ng-include

12
推荐指数
1
解决办法
3万
查看次数

Angular JS ng-Include表达式

ng-include到目前为止,我试图阅读文档,但没有运气.我想要做的就是ng-include评估模板/部分所在的路径并加载内容:

<div data-ng-include src="'{{pageData.src}}'"></div>
Run Code Online (Sandbox Code Playgroud)

我可以看到在控制台中pageData.src返回"tpl/page.html".我尝试了以下变化:

<div data-ng-include src="{{pageData.src}}"></div>
<div data-ng-include src='{{pageData.src}}'></div>
<div data-ng-include src={{pageData.src}}></div>
Run Code Online (Sandbox Code Playgroud)

他们似乎都没有评估表达方式.我收到以下错误:

Error: [$parse:syntax] http://errors.angularjs.org/1.2.9/$parse/syntax?p0=pageData.src&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=3&p3=%7B%7BpageData.src%7D%7D&p4=pageData.src%7D%7D
Run Code Online (Sandbox Code Playgroud)

反馈非常感谢!

angularjs angularjs-ng-include

11
推荐指数
1
解决办法
1万
查看次数

调试Angular的摘要周期:如何找到无限循环的原因?

我目前正在处理一些带有延迟加载内容+控制器的代码.我的代码基本上就像这个小提琴一样.但是,出于某种原因,我的版本不起作用,而只要角度尝试更新它的视图,我就会获得无限的摘要周期.

当我ng-include从这个简单的重复声明中删除时,问题就消失了:

<div class="container" ng-repeat="pageName in pageNames">
  <div ng-include="pageName"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

最奇怪的部分:exact same error即使pageNames从未分配给范围,也会发生.两个范围(外部和内部控制器的范围 - 我每个都有)可以完全为空(我用Batarang检查 - 我只有两个空的范围),我仍然得到错误.

我的代码有点太复杂,有太多其他依赖项,所以在这里发布是没有意义的.它最纯粹的版本是上面的小提琴.我无法找到两者之间的逻辑差异.当我用Batarang检查我的望远镜时,我也没有看到任何可疑的东西:

  • 我没有在我的范围中使用函数
  • 我没有利用 $watch
  • 我没有利用 ng-model

我的结论是,我没有明确地改变任何东西,所以它必须是有角度的东西.

我可以以某种方式让Angular或Batarang告诉我在摘要迭代后哪些范围变量已经改变,所以我可以识别导致无限循环的罪魁祸首?

更新:

我终于想通了,history.pushState搞砸了一切.我现在正在研究替代方案,例如$location服务.不过,我仍然想知道如何调试这类问题.任何提示?

javascript angularjs angularjs-ng-repeat angularjs-ng-include

10
推荐指数
1
解决办法
6654
查看次数

更改$ includeContentRequested上的源URL

我想在每次ng-include指令请求部分时更改URL .到目前为止,我能够看到这样的网址和事件:

app.run(function ($rootScope) {
    $rootScope.$on('$includeContentRequested', function (event, url) {
        console.log(event);
        console.log(url);
    });
});
Run Code Online (Sandbox Code Playgroud)

现在我需要能够将URL更改'templates/incs/includedPartial.html''templates/incs/includedPartial.html?cache_version=1_1',然后使用新链接包含部分.

显然我这样做是为了防止版本更改时出现缓存问题.这是一个好策略还是有更好的解决方案?在此先感谢任何帮助......

caching angularjs angularjs-ng-include

10
推荐指数
1
解决办法
935
查看次数

9
推荐指数
1
解决办法
1万
查看次数

Angular和jQuery ng-included with document.ready无法正常工作

我正在尝试使用HMTL加载一个放在单独的html中的组件.问题是,只要在浏览器中加载页面就会调用它.

以下是我的模态代码:

<div class="modal fade borderColorC0C0C0 borderRadiusOverride" id="termsAndConditionsPopover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" ng-include="'components/popover/termsAndConditions/termsAndConditions.html'">

</div>
Run Code Online (Sandbox Code Playgroud)

组件代码在这里:

termsAndConditions.html

<div class="modal-dialog borderRadiusOverride">
    <div class="modal-content borderRadiusOverride">
      <div class="termsAndConditionsHeaderColor borderRadiusOverride divHeight50 paddingTop15 paddingLeft15 paddingBottom15 borderBottomColorC0C0C0">
        <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
        <h5 class="modal-title marginBottom15 fontColorTileSteps" id="myModalLabel">Cisco's GSA shipping Policy</h5>
      </div>
      <div class="modal-body borderRadiusOverride fontColorTileSteps">
        This policy outlines the requirements of shipping Internationally including but not limited to:
<ul>
    <li>All members of the Cisco workforce are responsible to adhere to this policy</li>
    <li>AST is …
Run Code Online (Sandbox Code Playgroud)

javascript jquery document-ready angularjs angularjs-ng-include

9
推荐指数
1
解决办法
6665
查看次数

ng-model在ng-include中不起作用

我是angularjs的初学者,目前我正面临着ng-include的问题.

我有一个使用partials的测试应用程序.这是我的代码.

<html ng-app ="TextboxExample">
    <head>
        <title>Settings</title>
        <script src="angular.js"></script>
  </head>

    <body ng-controller="ExampleController">
        <div ng-include src = "'view.html'"></div>
        <script>
          angular.module('TextboxExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
              $scope.textboxVal = 'fddfd';

              $scope.ReadGeneralSettings = function() {
                alert($scope.textboxVal);
              }
              $scope.ResetGeneralSettings = function() {

                $scope.textboxVal = 'fddfd';
              }

            }]);
        </script>
        <button class="pull-right" ng-click = "ReadGeneralSettings()">Read</button>
        <button class="pull-right" ng-click = "ResetGeneralSettings()">Cancel</button>



    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

部分代码view.html是

<input type="text" ng-model="textboxVal">
Run Code Online (Sandbox Code Playgroud)

出于某种原因,当我在文本框中输入值时,设置为ng-model的textboxVal不会更新.但是如果我不使用ng-include并直接将view.html的内容添加到主html文件中,这样可以正常工作.请帮忙.

谢谢Sunil

javascript angularjs angularjs-ng-include

9
推荐指数
1
解决办法
7327
查看次数

角度ng-包含在错误的位置

我尝试包含角度模板ng-include.要包含的页面:

<table class="table table-hover table-striped">
      <thead>
          <tr>
            <th translate>
              First
            </th>
            <th translate>
              Second
            </th>
            <th translate>
              Third
            </th>
          </tr>
      </thead>
      <tbody>
          <ng-include src="getTemplate('default')"></ng-include>
      </tbody>
  </table>
Run Code Online (Sandbox Code Playgroud)

模板:

<tr class="table-row-clickable">
  <td>text1</td>
  <td>text2</td>
  <td>text3</td>
</tr>
Run Code Online (Sandbox Code Playgroud)

获取模板方法:

$scope.getTemplate = function(templateName) {
    return APP_CONFIG.TPL_PATH + '/path/' + templateName + '.html';
};
Run Code Online (Sandbox Code Playgroud)

模板加载正常,我可以在页面上看到它,但在错误的地方.这是我浏览器控制台的屏幕,ng-include表格之前的插页,而不是在其中: 在此输入图像描述

你能帮我理解一下,为什么?先感谢您.

编辑1,添加浏览器的渲染: 在此输入图像描述

javascript angularjs angularjs-ng-include

9
推荐指数
1
解决办法
527
查看次数