Anglejs에서 컨트롤러와 명령어 간의 상호 작용을 구현하는 방법에 대한 예제 코드-JS 튜토리얼-php.cn

Anglejs에서 컨트롤러와 명령어 간의 상호 작용을 구현하는 방법에 대한 예제 코드

黄舟

풀어 주다： 2017-06-01 09:34:42

원래의

1071명이 탐색했습니다.

이 글에서는 controller와 angular js 간의 상호 작용을 구현하는 방법에 대한 자세한 설명을 주로 소개합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

다음 DOM 구조가 있는 경우:

  <p ng-controller="MyCtrl"> 
   <loader>滑动加载</loader> 
</p>

로그인 후 복사

동시에 우리 컨트롤러에는 다음과 같은 서명이 있습니다.

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]);

로그인 후 복사

동시에 명령어의 서명은 다음과 같습니다.

myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind(&#39;mouseenter&#39;, function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意这里的坑，howToLoad会被转换成小写的howtoload 
      }); 
    } 
  }  
});

로그인 후 복사

이 때 우리 명령어는 범위를 통해 컨트롤러에 대한 호출을 완료할 수 있습니다. .loadData 또는 범위.$apply . 그런데 두 개의 컨트롤러가 있고 $scope의 메서드가 두 컨트롤러에서 서로 다르다면 어떨까요?

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加载数据中...22222"); 
  } 
}]);

로그인 후 복사

이때 지침에서 메서드를 어떻게 호출해야 할까요? 위의 메서드를 따르면 문제가 발생합니다: MyCtrl2 loadData는 없고 loadData2만 있습니다. 이때 다음 지침을 사용하여 속성을 사용자 정의해야 합니다!

우리는 두 개의 컨트롤러 컨트롤러, 즉 MyCtrl과 MyCtrl2를 정의했습니다. 두 컨트롤러 모두 자체 정의된 명령어를 사용합니다. load:

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

로그인 후 복사

다음과 같이 컨트롤러 코드를 사용자 정의했습니다.

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加载数据中...22222"); 
  } 
}]); 
//在模块下挂载一个loader指令 
myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind('mouseenter', function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意这里的坑，howToLoad会被转换成小写的howtoload 
        // scope.$apply(attrs.howtoload); 
        //其中scope为POJO，但是有一系列的工具方法如$watch,$apply等 
      }); 
    } 
  }  
});

로그인 후 복사

분명히 여기에는 MyCtrl과 MyCtrl2라는 두 개의 컨트롤러가 있습니다. 이때 명령어는 어떤 컨트롤러를 호출해야 하는지 어떻게 알 수 있나요? , 그리고 이 속성을 사용하여 다양한 컨트롤러 호출을 판단하므로 명령어가 다른 컨트롤러에서 호출될 수 있습니다!

요약: 명령어가 정의된 이유는 명령이 다른 컨트롤러와 상호 작용할 수 있도록 하기 위한 것입니다. 명령에 대한 구성 항목이 정의됩니다. 이것이 명령과 컨트롤러 간의 데이터 상호 작용의 원리입니다!

위 내용은 Anglejs에서 컨트롤러와 명령어 간의 상호 작용을 구현하는 방법에 대한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!