指令与控制器交互，指令与指令交互

来源：互联网发布：淘宝如何在游戏平台编辑：程序博客网时间：2024/05/17 08:12

慕课网《AngularJS实战》–指令3笔记，点击打开链接

一、不同指令对应不同控制器方法（指令的复用）

Directive&Controller.js

var myModule = angular.module("MyModule", []);myModule.controller('MyCtrl', ['$scope', function($scope){    $scope.loadData=function(){        console.log("加载数据中...");    }}]);myModule.controller('MyCtrl2', ['$scope', function($scope){    $scope.loadData2=function(){        console.log("加载数据中...22222");    }}]);myModule.directive("loader", function() {    return {        restrict:"AE",        link:function(scope,element,attrs){            element.bind('mouseenter', function(event) {                //scope.loadData();                // scope.$apply("loadData()");                // 注意这里的坑，howToLoad会被转换成小写的howtoload                scope.$apply(attrs.howtoload);            });        }    } });

Directive&Controller.html

<!doctype html><html ng-app="MyModule">    <head>        <meta charset="utf-8">    </head>    <body>        <div ng-controller="MyCtrl">            <loader howToLoad="loadData()">滑动加载</loader>        </div>        <div ng-controller="MyCtrl2">            <loader howToLoad="loadData2()">滑动加载</loader>        </div>    </body>    <script src="framework/angular-1.3.0.14/angular.js"></script>    <script src="Directive&Controller.js"></script></html>

二、指令间的交互
以下示例：四种能力越来越强的超人
Directive&Directive.js

var myModule = angular.module("MyModule", []);myModule.directive("superman", function() {    return {        scope: {},        restrict: 'AE',        controller: function($scope) {            $scope.abilities = [];            this.addStrength = function() {                $scope.abilities.push("strength");            };            this.addSpeed = function() {                $scope.abilities.push("speed");            };            this.addLight = function() {                $scope.abilities.push("light");            };            this.addFart = function() {                $scope.abilities.push("fart");            };        },        link: function(scope, element, attrs) {            element.addClass('btn btn-primary');            element.bind("mouseenter", function() {                console.log(scope.abilities);            });        }    }});myModule.directive("strength", function() {    return {        require: '^superman',        link: function(scope, element, attrs, supermanCtrl) {            supermanCtrl.addStrength();        }    }});myModule.directive("speed", function() {    return {        require: '^superman',        link: function(scope, element, attrs, supermanCtrl) {            supermanCtrl.addSpeed();        }    }});myModule.directive("light", function() {    return {        require: '^superman',        link: function(scope, element, attrs, supermanCtrl) {            supermanCtrl.addLight();        }    }});myModule.directive('fart',  function(){    return {         require: '^superman',        link: function(scope, element, attrs, supermanCtrl) {            supermanCtrl.addFart();        }    };});

Directive&Directive.html
controller：中写你想要暴露给外部的方法
link：绑定事件、数据
D

<!doctype html><html ng-app="MyModule"><head>    <meta charset="utf-8">    <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">    <script src="framework/angular-1.3.0.14/angular.js"></script>    <script src="Directive&Directive.js"></script></head><body>    <div class="row">        <div class="col-md-3">            <superman strength>动感超人---力量</superman>        </div>    </div>    <div class="row">        <div class="col-md-3">            <superman strength speed>动感超人2---力量+敏捷</superman>        </div>    </div>    <div class="row">        <div class="col-md-3">            <superman strength speed light>动感超人3---力量+敏捷+发光</superman>        </div>    </div>        <div class="row">        <div class="col-md-4">            <superman strength speed light fart>动感超人3---力量+敏捷+发光+放屁</superman>        </div>    </div></body></html>

0 0