Question

我使用Browserify进行捆绑和Angularjs框架。场景是，我有一个Angularjs组件，其指令定义为 -

var loginDirective = /*@ngInject*/ function(){
  return{
    templateUrl:'views/login/templates/loginComponent.html',
    link:function(scope,ele,attr){
    }
  }
};

当我使用browserify单独运行组件时，这非常有效。现在我有一个项目“MyAPP”，我使用NPM安装将此组件放入项目的node_modules文件夹中。然后，我需要这个组件，并在项目中包含DI，就像这样

var angular = require('angular');
require ('baseComponent');

module.exports = angular.module('mainComponent',['baseComponent'])

DI工作正常，但我收到一条错误消息，说找不到组件'views/login/templates/loginComponent.html'导致它开始在我的项目view文件夹而不是自己的view文件夹中搜索。

如何解决此问题？

Answer 1

我认为通常的方法是将模板放入JavaScript代码并手动将其加载到模板缓存中。像这样：

angular.module('mainComponent').run(function($templateCache) {
    var template = '<h1> LoginComponent </h1>';
    $templateCache.put( 'loginComponent.html' , template );
});

指令中的templateUrl应如下所示：

var loginDirective = /*@ngInject*/ function(){
   return{
      templateUrl: 'loginComponent.html',
      link: function(scope,ele,attr){
      }
   }
};

你可以在很多开源库中看到这个，例如ui-bootstrap，ui-grid等。

需要Angular组件时找不到相对路径

1 个答案: