[武汉|荣耀师兄]JS-小王峰|2017年06月01日的日报-技能树.IT修真院

发表于： 2017-06-01 21:14:06

1 1076

今天完成的事情：

学会了一部分的自定义指令。

明天计划的事情：找古尘师姐进行demo，进复盘

遇到的困难：

昨天家豪师兄说用原生js在angular添加属性，然后我尝试用原生js来操作dom添加属性。结果控制台报错，说无法找到添加元素的方法。只有使用自定义指令了。。。今天学习了一天的自定义指令，还是有点蒙。主要还是对transclude和ng-transclude指令理解不了，总会把他们弄混。举个例子

在index.html页面中代码为

<body ng-app="app" ng-controller="MyController as vm">

<multi-transclude>
    <multi-transclude-title>我是指令元素内部的title</multi-transclude-title>
    <multi-transclude-body>我是指令元素内部的body</multi-transclude-body>
    <multi-transclude-footer>我是指令元素内部的footer</multi-transclude-footer>
</multi-transclude>

在index.js页面中的代码

(function() {
    angular.module('app', [])
        .controller('MyController', myController)
        .directive('oneTransclude', oneTransclude)
        .directive('multiTransclude', multiTransclude);

    myController.$inject = [];

    function myController() {
        var vm = this;
        vm.title = 'ng-transclude';
    }

function multiTransclude() {
    return {
        restrict: 'AE',
        transclude: {
            'title': 'multiTranscludeTitle',
            'body': 'multiTranscludeBody',
            'footer': '?multiTranscludeFooter'
        },
        templateUrl: 'customer-name.html'
    };
}

在customer-name.html中的代码

<div >
    <div ng-transclude="title"></div>
    <div>忽略我,我就是证明我是在模板中的1</div>
    <div ng-transclude="body"></div>
    <div>忽略我,我就是证明我是在模板中的2</div>
    <div ng-transclude="footer"></div>
</div>