controller와 명령 통신 방법

7526 단어 controller
angular에서는 여러 개의 컨트롤러와 명령을 자주 사용합니다
그들은 각자의 $scope를 가지고 있기 때문에 $scope를 뛰어넘는 호출에 문제가 생겼다.
몇 가지 흔히 볼 수 있는 방법으로 사용할 수 있다.
 
방법1: 명령 Require
        <div directive1="xx">

            <div directive2></div>

        </div>



                     directive("directive1", [function () {

                        return {

                            restrict: "A",

                            link: function () { },

                            scope: true,

                            controller: ["$scope", function ($scope) {                            

                                this.alert = function () {

                                    $scope.name = "100"

                                }                              

                            }],                           

                            name: "directive1Controller"

                        }

                    }]).

                    directive("directive2", [function () {

                        return {

                            restrict: "E",

                            require: "^directive1Controller", //       controller

                            link: function (scope, elem, attrs, directive1Controller) {

                                directive1Controller.alert(); //    

                            }

                        }

                    }]).

명령은 Require를 통해 다른 명령어 컨트롤러를 호출하여 통신에 도달합니다
 
방법2: 서비스
                    service("sharing", [function () {

                        this.data = "";

                    }]).

                    controller("ctrl", ["$scope", "sharing", function ($scope, sharing) {

                        $scope.updateData = function () {

                            sharing.data = "new value";

                        }

                    }]).                  

                    directive("directive1", ["sharing", function (sharing) {

                        return {

                            restrict: "A",

                            link: function (scope) {

                                scope.$watch(function () {                                   

                                    return sharing.data;

                                }, function () {

                                    scope.name = sharing.data;

                                });

                            }                            

                        }

                    }]).

모듈 간 통신을 하려면 서비스로 인터페이스를 제공하는 것이 좋습니다. 서비스와 컨트롤러는 $watch를 통해 $scope를 업데이트할 수 있습니다.
$watch가 단점이 있어서 메모리 소모가 많아요.
 
방법 3: 이벤트
                    controller("ctrl", ["$scope", "sharing", "$rootScope", function ($scope, sharing, $rootScope) {

                        $scope.updateData = function () {

                            $rootScope.$broadcast("sharingChange", "new value");

                            //$emit        

                            //$broadcast       

                        }

                    }]).                  

                    directive("directive1", ["sharing", function (sharing) {

                        return {

                            restrict: "A",

                            link: function (scope) {

                                scope.$on("sharingChange", function (e, newValue) {

                                    scope.name = newValue;

                                });

                            }

                        }

                    }]).

이것은 비교적 공식적인 방법이다.
 
요약:
서브층과 부층 통신, 계승된 $scope, 명령의 Require, 이벤트 방송 많이 사용
모듈 간의 통신은 서비스 제공 인터페이스를 사용하면 쉽게 볼 수 있습니다. 서비스와 controller 명령 간의 통신은watch, $on 또는 전역 변수를 사용할 수 있습니다. (모듈 내의 전역, 너무 많이 사용하지 마세요)
 
서비스 인터페이스는 좋지만 지령의 복용성이 높기 때문에 모든 조작이 인터페이스를 열면 곧 인터페이스가 많아지기 때문에 인터페이스가 복용성이 높음을 확보해야 한다. 만약에 특정한 개발에 맞추기 위해 인터페이스를 열면 가치가 없다.
   $rootScope.$broadcast("Main.myParent.alert", function ($scope) { //    , (        ,       $scope)

                                    $scope.name = "keatkeat"

                                });

  

   $scope.$on("Main.myParent.alert", function (e, fn) { //    

                                    fn($scope); //        $scope  ,          $scope

                                });

우리는 복용성이 높지 않은 조작을 바깥에 쓸 수 있다. 이렇게 하면 너무 많은 인터페이스를 쓰지 않아도 된다.

좋은 웹페이지 즐겨찾기