angularjs 1.x 사용자 정의 지령의 컨트롤러와 지령 간의 통신

5852 단어
1. 명령에서 컨트롤러를 호출하는 방법
//html
<div ng-controller="MyCtrl">  
      <loader howToLoad="loadData()"> loader>  
div>
// 
var myModule = angular.module("MyModule", []);  
//controller
myModule.controller('MyCtrl', ['$scope', function($scope){  
    $scope.loadData=function(){  
        console.log(" ...");  
    }  
}]);  
myModule.directive("loader", function() {  
    return {  
        restrict:"AE",//Element,Attribute  
        scope: true,// , scope
        link:function(scope,element,attrs){
            // 3 :
            //scope.loadData(); // 1
            //scope.$apply("loadData()");  // 2
            setTimeout(function(){
                scope.$apply(attrs.howtoload());// 3, 
            })
        }  
    }   
});  

명령에서 scope.$를 통해apply는 컨트롤러의 방법을 호출하는 데 이 세 가지 방식을 사용할 수 있습니다.
명령의 속성 scope가true와false일 때 호출될 수 있습니다.scope가 {}일 때 명령의 속성 scope 값을 호출하는 데 성공하지 못합니다.
  • scope:false, 명령을 정의할 때 scope 속성은 기본적으로false로 부모 scope를 사용합니다.부모 scope를 수정하면 하위 scope의 값이 바뀌고, 하위 scope를 수정하면 부모 scope의 값이 바뀝니다
  • scope:true, 새로운 역할 영역.처음에는 부모 scope에 귀속되었지만, 사용자 정의 명령에 있는 입력 상자를 수정하면 하위 scope는 부모 scope를 만들고 계승합니다.이후, 부모 scope를 수정하면 하위 scope의 값에 영향을 주지 않고, 하위 scope를 수정해도 부모 scope의 값을 바꾸지 않습니다..
  • scope: {}, 새로운 "격리"scope를 만들지만, 부모 scope와 통신하여 격리할 수 있는 scope는 일반적으로 복용 가능한 명령을 만드는 데 사용되며, 부모 scope의 모델에 관여하지 않습니다.그러나'격리'라고 말하지만, 일반적으로 우리는 이 하위 scope를 부모 scope의 변수와 연결시켜야 한다.귀속된 정책은 세 가지가 있습니다
  • @: 단방향 귀속, 외부 scope는 내부 scope에 영향을 줄 수 있지만 반대로 성립되지 않습니다
  • =: 양방향 귀속, 외부 scope와 내부 scope의 모델은 서로 바뀔 수 있다
  • &: 내부 scope 함수의 반환값과 외부 scope의 모든 속성을 연결합니다

  • 2. 컨트롤러에서 지령에 메시지 보내기
    //html
    <div ng-controller="MyCtrl">  
          <loader howToLoad="loadData()"> loader>  
    div>
    //controller
    myModule.controller('MyCtrl', ['$scope', function($scope){  
        $scope.loadData=function(){  
            $scope.$broadcast('approvalRecord.reloadData');// 
        }  
    }]);  
    myModule.directive("loader", function() {  
        return {  
            restrict:"AE",//Element,Attribute  
            scope: true,// , scope
                function reloadData(){
                    //TODO
                }
                // 
                scope.$on('approvalRecord.reloadData', function(){
                    reloadData();
                });
            }  
        }   
    });  

    컨트롤러가 지령 안의 방법을 호출하면 방송을 보내고 지령 안에서 방송을 수신한 다음에 리셋 방법에서 지령 중의 방법을 실행할 수 있다

    좋은 웹페이지 즐겨찾기