angular-directive（组件化）

来源：互联网发布：织梦cms免费模板编辑：程序博客网时间：2024/05/16 05:00

base.js

var myApp = angular.module('helloworld', []);myApp.directive('expander', function() {    return {        restrict : 'EA',        replace : true,        transclude : true,        scope : {            title : '=expanderTitle'        },        template : '<div>'        + '<div class="title" ng-click="toggle()">{{title}}</div>'        + '<div class="body" ng-show="showMe" ng-transclude></div>'        + '</div>',        link : function(scope, element, attrs) {            scope.showMe = false;            scope.toggle = function toggle() {                scope.showMe = !scope.showMe;            }        }    }});

html

这里的代码需要ng-app的包裹才会生效
大家自己加

 <expander class='expander' expander-title='title'>        {{text}}    </expander>

这里的{{text}}为何会插入到'<div class="body" ng-show="showMe" ng-transclude></div>'这里面我很好奇啊搜了一下哈哈
找到了这句话`
directive包含的内容会放在ng-transclude标示的元素中，transclude要配合ng-transclude使用 所以啦这里的 {{text}}最终会在

'<div class="body" ng-show="showMe" ng-transclude></div>'

这里面包裹着这样我这个例子我就没有疑问了

1 0