angular-directive(组件化)

base.js

var myApp = angular.module('helloworld', []);
myApp.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        scope : {
            title : '=expanderTitle'
        },
        template : '
' + '
{{title}}
'
+ '
'
+ '
'
, 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}}为何会插入到'

'这里面 我很好奇啊搜了一下 哈哈
找到了这句话`
directive包含的内容会放在ng-transclude标示的元素中,transclude要配合ng-transclude使用 所以啦这里的 {{text}}最终会在

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

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

你可能感兴趣的:(angularjs,angularjs,js,前端)