コマンドとコントローラのインタラクション、コマンドとコマンドのインタラクション

14322 ワード
angglarjs
慕课网《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 

<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>

二、指令間の相互作用は以下の例である:4種類の能力がますます強くなるスーパーマン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をバインドする

<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>
paiza10万登録ありがとうゴルフ大会参加報告(Java:375 C#:285)
Rubyの配列で使えるメソッド、二次元配列の使い方