自定义Angular指令-优快云博客

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>自定义指令2</title>
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    </head>
    <body ng-app="demoApp">
        <div breadcrumb></div>
        <breadcrumb data=""></breadcrumb>
        <script src="bower_components/angular/angular.js"></script>
        <script>
            var demoApp = angular.module('demoApp', []);
            // demoApp.directive('btn', [function(){
            //  return {
            //      scope:{
            //          primay:'@',
            //          lg:'@',
            //          block:'@',
            //      },
            //      template:'<button class="btn {{primary==\'true\'?\'btn-primary\':\'\'}}">button</button>'
            //  }
            // }]);

            // demoApp.directive('btn',[function(){
            //  return{
            //      //指令对象的transclude必须设置为true才可以在模板中使用ng-transclude指令
            //      transclude:true,
            //      replace:true, //替换指令在html中绑定的元素
            //      template:'<button class="btn btn-primary btn-lg" ng-transclude></button>'
            //  };
            // }]);

            demoApp.directive('breadcrumb', [function(){

                return {
                    restrict: 'EA',  
                    // E = Element, A = Attribute, C = Class, M = Comment
                    // template: '',
                    templateUrl: 'templ/breadcrumb.html',
                    replace: true,
                    // transclude: true,

                };
            }]);

        </script>
    </body>
</html>