Question

最近我开始在AngularJS上创建自己的应用程序。在早期阶段，我遇到了一个问题，而且我很长时间都无法解决这个问题。在我的应用程序中，我使用ng-view和angular-route从.html文件加载不同的部分。在大多数情况下，我需要第三方库，如Loading Bar。我在正文的末尾添加了脚本src。就像使用Loading Bar一样，如果我在index.html中使用OUTSIDE ng-view，它的工作原理非常好。但是，如果我将需要此库的元素放在其他.html文件中，然后加载到ng-view中，则脚本不起作用。这是一个例子：

var container = new Container();

container.Configure(config =>
{
    // failed attempt #1
    config.Forward<IComponentDataAccessor, ComponentDataAccessorProxy>();

    // failed attempt #2
    config.For<IComponentDataAccessor>().Use<ComponentDataAccessorProxy>();
});

此代码按预期工作。但是，如果我通过像这样的ng-view加载代码：

<body>

<div ng-view></div>
<div
        class="ldBar label-center"
        style="width:50%;height:50%;margin:auto"
        data-value="35"
        data-preset="circle"
></div>

<script src="libs/loading-bar/loading-bar.js"></script>
</body>

它不起作用。据我所知，我需要在ng-view加载后初始化库脚本。或者问题可能在其他地方。这里有很多类似的问题，但答案对我来说并不完全清楚。他们中的大多数都是关于创建自定义工厂或服务。但我怎么能用第三方库来做呢？如果有可能，如果有人能告诉我如何使用相同的装载栏来解决这个问题，我将不胜感激。谢谢。

Answer 1

http://plnkr.co/edit/IlOsCqn07sJLkQCMcUCk?p=preview

<div
        loading-bar
        class="ldBar label-center"
        style="width:50%;height:50%;margin:auto"
        data-value="35"
        data-preset="circle"
></div>

使用它们为处理某些元素提供的JS函数来包装加载条形码的指令。

angular.module('loading-bar-angular', [])
  .directive('loadingBar', function(){
    return {

      link:function(scope,iElem,iAttr){
        new ldBar(iElem[0]);
        console.log('loading bar added')
      }
    }
  });

没有深入研究我的猜测是插件通常只是等待DOMContentLoaded，然后使用querySelector或类似的东西查找元素。在上面的指令中，我只是使用添加了“loading-bar”属性并将其传递给加载栏JS函数的元素。

https://loading.io/progress

滚动到它说JS API的位置以查看ldBar函数...我查看了源代码，看它还接受一个DOM元素而不是一个字符串用作选择器。

不在ng-view AngularJS中工作的库

1 个答案: