[AngularJS] Directive with Transcluded Elements

Create a wrapWith directive using advanced transclusion techniques.

transclude - compile the content of the element and make it available to the directive. Typically used with ngTransclude. The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.

true - transclude the content of the directive. (replace the whole stuff)

'element' - transclude the whole element including any directives defined at lower priority. (append to the dom)

See more: http://www.cnblogs.com/Answer1215/p/3932450.html

 

<!DOCTYPE html>
<html>
<head>
    <title>Egghead.io</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
</head>
<body ng-app="egghead" ng-controller="AppCtrl as app">

<cg-form wrap-with="well"></cg-form> <!-- get all the template from directive put into well template -->
<cg-form wrap-with="red"></cg-form> <!-- get all the template from directive put into red template -->
 <script id="form-info" type="text/ng-template"> <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </script> <script id="well" type="text/ng-template"> <div class="well"></div> </script> <script id="red" type="text/ng-template"> <div style="color: red"></div> </script> <script src="bower_components/angular/angular.min.js"></script> <script src="app.js"></script> </body> </html>
var egghead = angular.module("egghead", []);

egghead.controller("AppCtrl", function () {
    var app = this;

    app.people = [{"firstName":"Sonia","lastName":"Hodges"},{"firstName":"Benedict","lastName":"Morrow"},{"firstName":"Keegan","lastName":"Fields"},{"firstName":"Jade","lastName":"Martinez"},{"firstName":"Jaquelyn","lastName":"Suarez"},{"firstName":"Leo","lastName":"Hughes"},{"firstName":"Skyler","lastName":"Sharp"},{"firstName":"Genevieve","lastName":"Villarreal"},{"firstName":"Beau","lastName":"Hendrix"},{"firstName":"Lara","lastName":"Howard"},{"firstName":"Jonah","lastName":"Crawford"},{"firstName":"Kendall","lastName":"Lane"},{"firstName":"Kimberly","lastName":"Mcclain"},{"firstName":"Ingrid","lastName":"Salinas"},{"firstName":"Moses","lastName":"Mcpherson"},{"firstName":"Britanney","lastName":"Sweeney"},{"firstName":"Patricia","lastName":"Perez"},{"firstName":"Roth","lastName":"Heath"},{"firstName":"Nora","lastName":"Osborne"},{"firstName":"Giacomo","lastName":"Shepard"}]
});

egghead.directive("wrapWith", function ($templateCache) {
    return {
        transclude: 'element',
        link: function (scope, element, attrs, ctrl, transclude) {
            var template = $templateCache.get(attrs.wrapWith);
            console.log(template);

            var templateElement = angular.element(template);

            console.log(element);

            transclude(scope, function (clone) {
                element.after(templateElement.append(clone));
            })
        }
    }
});

egghead.directive("cgForm", function ($templateCache) {
    return {
        restrict: "EA",
        templateUrl: "form-info"
    }
});

 

 

result: 

posted @ 2014-12-21 23:43  Zhentiw  阅读(492)  评论(0)  编辑  收藏  举报