美文网首页
自定义指令

自定义指令

作者: 小漠穷秋 | 来源:发表于2018-01-03 15:47 被阅读0次

    第一次使用angularjs的directive指令,遇到非常气人的问题
    app.directive('hello', function() {
    return {
    restrict: 'E',
    // template: '<div>Hi there</div>',
    templateUrl:'http://localhost:9090/keti/template/addKetiTemplate.html' ,
    replace: true
    };
    });

    /addKetiTemplate.html代码如下:
    <div>
    some stuff
    </div>
    <div>
    some other stuff
    </div>

    访问报错 Error: [$compile:tplrt]

    解决方法:
    在两个div的外层添加一层div,如下
    <div>
    <div>
    some stuff
    </div>
    <div>
    some other stuff
    </div>
    </div>
    然后就可以了
    templateUrl引用的模板文件,需要一个根节点或者说根元素。不能出现并列的html元素代码,就比如两行div,等等

    并且注意
    {{block.status === 1 ? "成功" : "失败"}} 正确
    {{block.status === 1 ? 成功 : 失败}} 错误 会造成解析错误。

    不过我们可以通过报错得知具体的位置
    angularjs [$parse:lexerr]

    同时需要注意
    指令名 <hello-world> 可以注册为helloWorld
    属性名 <orderMethod> 在attrs中会被解析为ordermethod 全小写。

    相关文章

      网友评论

          本文标题:自定义指令

          本文链接:https://www.haomeiwen.com/subject/lzghnxtx.html