相关疑难解决方法(0)

动态templateUrl - AngularJS

从Angular 1.1.4开始,您可以拥有一个动态模板URL.从这里开始,

templateUrl - 与模板相同,但模板是从指定的URL加载的.由于模板加载是异步的,因此编译/链接将暂停,直到加载模板为止.

您可以将templateUrl指定为表示URL的字符串,或者指定为带有两个参数tElement和tAttrs的函数(在下面的编译函数api中描述)并返回表示url的字符串值.

如何利用它来生成基于我的指令属性的动态模板?显然这不起作用,因为tAttrs.templateType只是字符串"templateType"

templateUrl: function (tElement, tAttrs) {
  if (tAttrs.templateType == 'search') {
    return '/b/js/vendor/angular-ui/template/typeahead/typeahead.html'
  } else {
    return '/b/js/vendor/angular-ui/template/typeahead/typeahead2.html'
  }
}
Run Code Online (Sandbox Code Playgroud)

鉴于我无法访问范围,我该如何管理?

angularjs angular-ui

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

基于指令中的属性设置templateUrl

我正在研究一组角度指令,我想根据属性的存在或值加载正确的模板.

<my-form horizontal> </my-form>
<my-form vertical> </my-form>
Run Code Online (Sandbox Code Playgroud)

如果是水平的,则templateUrl应该是/partials/horizontal-form和如果是vertical,则应该是templateUrl/partials/vertical-form

我对templateUrl感兴趣,因为我不能使用,template因为html取决于属性.在该compile.pre函数中,html已经加载.

如果还有另一种方法可以达到这个目的,我会对它开放,因为我现在开始使用棱角分析,信息越多越好.

谢谢

directive angularjs

15
推荐指数
2
解决办法
2万
查看次数

AngularJS 1.5中同一组件中的多个模板

我可以在AngularJS 1.5组件中使用多个模板吗?我有一个组件有一个属性,所以我想根据该属性名称加载不同的模板.如何根据元素的属性名称加载模板?

jsConfigApp.component('show', {
templateUrl: 'component/show.html',  //How to change it based on attribute value?
bindings:{
    view:"@"
},
controller: function () {
    console.log(this.view)
    if (this.view = "user") {
       console.log("user")
    } else if (this.view = "user") {
        console.log("shop")
    } else {
        console.log("none")
    }      
}
})
Run Code Online (Sandbox Code Playgroud)

谢谢.

angularjs angularjs-components

11
推荐指数
2
解决办法
6980
查看次数

AngularJS指令templateUrl不会更新

我有角度指令的问题.当我编辑引用的文件的内容时,templateUrl直到我删除缓存后才会显示结果.我有以下代码:

Directive.js

.directive('appMainsec',['$window', function ($window){
    var objectMainSec = {
        restrict: 'A',
        templateUrl: 'partials/app-mainsec.html',
        controller: function (){},
        controllerAs: 'MainSectCtrl',
        link: function ($scope,elemnt,attr){
            elemnt.css('height', ($window.innerHeight - ($window.innerHeight * .25)) + 'px');
        }
    };

    return objectMainSec;
}]);
Run Code Online (Sandbox Code Playgroud)

APP-mainsec.html

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

和index.html

...
 <div app-mainsec></div>
...
Run Code Online (Sandbox Code Playgroud)

当我改为<h1>Hi</h1><h1>Hello</h1>,指令的视图在我删除缓存之前不会更新.

javascript angularjs angularjs-directive

5
推荐指数
1
解决办法
3612
查看次数