AngularJS - 명령의 상호 호출

3070 단어
사람들은 AngularJS를 좋아한다. 왜냐하면 그는 특색이 있기 때문이다. 그 중에서 그의 지령과 양방향 데이터의 연결이 사람들을 끌어당긴다. 그러면 AngularJS의 지령은 어떤 작용을 하는가?지령 사이의 것은 어떻게 서로 호출됩니까?
아래에 작은 데모가 있는데 AngularJS 지령 간의 상호 호출이라고 쓰여 있습니다. 한번 보세요.이 데모는 이렇습니다. 페이지에 세 개의div가 있습니다. 각각div는 서로 다른 명령을 연결하고, 마우스로 세 개의div를 미끄러질 때 서로 다른 이벤트를 터치합니다.
HTML 코드
<!DOCTYPE html>
<html lang="en" ng-app="MyModule">
<head>
    <meta charset="UTF-8">
    <title></title>
</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>            </superman>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <superman strength speed light>              </superman>
        </div>
    </div>
</body>
<script src="angular-1.3.0.14/angular.js"></script>
<script src="superman.js"></script>
</html>
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");
            };
        },
        link:function(scope,element,attrs){
            element.addClass('btn btn-primary');
            element.bind("mouseenter",function(){
               alert(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();
        }
    }
})

위의 HTML 라벨에서 우리는 모든div에 사용자 정의 라벨이 있는 것을 보았다. 예를 들어 <슈퍼맨>, , 등이다. 우리는 이 라벨에 특수한 기능을 연결할 수 있다. 우리는 각 라벨의 연결 기능이 달라야 한다. 이때 우리는ng-controller와directive를 사용한다. 그 중에서 슈퍼맨 명령의 Controller에 많은 방법을 정의했다.이런 방법들은 바깥의 일부 지령에 사용할 수 있도록 제공할 수 있으며, 이렇게 하면 지령의 끼워 넣는 사용을 형성할 수 있다.
Kubernetes에서 파이썬 응용 프로그램 개발
Amazon Connect를 통한 전화 분배

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage