[angular]指令之5controller

来源：互联网发布：淘宝网支付宝申请编辑：程序博客网时间：2024/05/16 17:49

<!DOCTYPE html><html lang="en" ng-app="testDirectiveController"><head>    <meta charset="UTF-8">    <title>测试DirectiveController</title>    <script src="../frameWork/angular.js"></script>    <script src="../testDirective/testDirectiveController.js"></script></head><body><h3>内容1:单独存在的指令，Controller几乎不用存在，用link足以</h3><test-controller-normal cus ="我是自定义属性值">    <controller-normal-title>我是标题</controller-normal-title>    <controller-normal-content>我是内容</controller-normal-content></test-controller-normal><h3>内容2:存在指令嵌套情况,单独的child</h3><test-controller-child></test-controller-child><h3>内容3:存在指令嵌套情况,单独的Parent</h3><test-controller-parent></test-controller-parent></body></html>

/** * 由于directive在angular中的地位之重，所以得认真对待。但理解难啊，所以决定逐个属性进行实例分析 * directive实例分析第五篇：controller * Created by liyanq on 16/12/21. *//**controller也是属于重要的属性，是一个函数，这个函数返回的对象可以给子指令link用到，类似继承原理。 * 1，controller原型function($scope, $element, $attrs, $transclude, otherInjectables) { ... } * 2，controller原型中的参数是服务，都得带$，且名称不能变，和link的参数完全不一样，与app.controller的含义一样. * 3，templateUrl->controller->link；其他如compile的时机还没实验。 * 4，必要性：在link中transclude参数得不到值，而在controller中能得到。 * 5，必要性：在父指令controller中写一些函数和值，可以在子指令中获取，类似继承中的public区域(最重要的一点吧?) * 6，注意点：link的函数有4个参数，最后一个就是父指令的或者同作用域(取决于require)的controller对象。 * 7，注意点：controller函数里面写的东西要想被子指令用到的话，得用this开始哦，给对象增值、增函数。 * */var app = angular.module("testDirectiveController", []);app.directive("testControllerNormal", function () {    var dir = {};    dir.restrict = "E";    dir.replace = false;    dir.transclude = {        title: "?controllerNormalTitle",        content: "?controllerNormalContent"    };    dir.template = "<div>我是模版的内容</div>" +        "<div ng-transclude='title'></div>" +        "<div ng-transclude='content'></div>";    dir.controller = function ($scope, $element, $attrs, $transclude) {        $scope.str = "ControllerNormal的controller执行了";        console.log($scope.str);        console.log($attrs["cus"]);//能得到值        console.log($transclude.isSlotFilled("content"));//true,意思是是否填充了槽...    };    dir.link = function (scope, elem, attrs, transclude) {        scope.str = scope.str + "ControllerNormal的link执行了";        console.log(scope.str);        console.log(attrs["cus"]);//能得到值    };    return dir;}).directive("testControllerParent", function () {    var dir = {};    dir.restrict = "E";    dir.replace = true;    dir.scope = true;    dir.template = "<div>我是Parent的模版内容" +        "<test-controller-child></test-controller-child>" +        "</div>";    dir.controller = function ($scope, $element, $attrs) {        $scope.message = "我是来自Parent的controller信息";        this.onClick = function () {            console.log("执行了onClick事件");            console.log($scope);        }    };    return dir;}).directive("testControllerChild", function () {    var dir = {};    dir.restrict = "E";    dir.replace = true;    dir.scope = true;    dir.require = "?^testControllerParent";    dir.template = "<div>我是Child的模版内容{{$parent.message}}" +        "<button ng-click='onParentFun()'>执行来自父作用域的函数</button>" +        "</div>";    dir.link = function (scope, elem, attrs, controller) {        scope.onParentFun = function () {            if (controller){//没找到不执行                controller.onClick();            }        };    };    return dir;});

0 0