Anglejs에서 컨트롤러와 명령어 간의 상호 작용을 구현하는 방법에 대한 예제 코드
이 글에서는 controller와 angularjs 간의 상호 작용을 구현하는 방법에 대한 자세한 설명을 주로 소개합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.
다음 DOM 구조가 있는 경우:
<p ng-controller="MyCtrl"> <loader>滑动加载</loader> </p>
동시에 우리 컨트롤러에는 다음과 같은 서명이 있습니다.
var myModule = angular.module("MyModule", []);
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.loadData=function(){
console.log("加载数据中...");
}
}]);동시에 명령어의 서명은 다음과 같습니다.
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
});
}
}
});이 때 우리 명령어는 범위를 통해 컨트롤러에 대한 호출을 완료할 수 있습니다. .loadData 또는 범위.$apply . 그런데 두 개의 컨트롤러가 있고 $scope의 메서드가 두 컨트롤러에서 서로 다르다면 어떨까요?
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");
}
}]);이때 지침에서 메서드를 어떻게 호출해야 할까요? 위의 메서드를 따르면 문제가 발생합니다: 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('MyCtrl', ['$scope', 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7461
15
1376
52
77
11
44
19
17
17
Windows 11에서 Xbox One 컨트롤러를 올바르게 보정하는 방법
Sep 21, 2023 pm 09:09 PM
Windows가 게임 플랫폼으로 선택되었으므로 게임 중심 기능을 식별하는 것이 더욱 중요합니다. 그 중 하나는 Windows 11에서 Xbox One 컨트롤러를 보정하는 기능입니다. 내장된 수동 보정을 사용하면 드리프트, 무작위 이동 또는 성능 문제를 제거하고 X, Y 및 Z축을 효과적으로 정렬할 수 있습니다. 사용 가능한 옵션이 작동하지 않으면 언제든지 타사 Xbox One 컨트롤러 보정 도구를 사용할 수 있습니다. 알아 보자! Windows 11에서 Xbox 컨트롤러를 어떻게 보정하나요? 계속하기 전에 컨트롤러를 컴퓨터에 연결하고 Xbox One 컨트롤러의 드라이버를 업데이트했는지 확인하세요. 그 동안 사용 가능한 펌웨어 업데이트도 설치하십시오. 1. 바람을 이용하라
Terraria에서 명령을 사용하여 아이템을 얻는 방법은 무엇입니까? -테라리아에서 아이템을 수집하는 방법은 무엇인가요?
Mar 19, 2024 am 08:13 AM
Terraria에서 명령을 사용하여 아이템을 얻는 방법은 무엇입니까? 1. 테라리아에서 아이템을 주는 명령은 무엇인가요? 테라리아 게임에서 아이템에 명령을 내리는 것은 매우 실용적인 기능입니다. 이 명령을 통해 플레이어는 몬스터와 싸우거나 특정 위치로 순간이동할 필요 없이 필요한 아이템을 직접 얻을 수 있습니다. 이를 통해 시간을 크게 절약하고, 게임 효율성을 향상시키며, 플레이어가 세계를 탐험하고 건설하는 데 더 집중할 수 있습니다. 전반적으로 이 기능은 게임 경험을 더 부드럽고 즐겁게 만듭니다. 2. Terraria를 사용하여 아이템 명령을 내리는 방법 1. 게임을 열고 게임 인터페이스로 들어갑니다. 2. 키보드의 "Enter" 키를 눌러 채팅창을 엽니다. 3. 채팅창에 "/give[플레이어 이름][아이템 ID][아이템 수량]" 명령 형식을 입력하세요.
VUE3 빠른 시작: Vue.js 지침을 사용하여 탭 전환
Jun 15, 2023 pm 11:45 PM
이 글은 초보자가 Vue.js3를 빠르게 시작하고 간단한 탭 전환 효과를 얻을 수 있도록 돕는 것을 목표로 합니다. Vue.js는 재사용 가능한 구성 요소를 구축하고 애플리케이션 상태를 쉽게 관리하며 사용자 인터페이스 상호 작용을 처리하는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. Vue.js3은 최신 버전의 프레임워크로, 이전 버전과 비교하여 큰 변화가 있었지만 기본 원칙은 변경되지 않았습니다. 이 기사에서는 독자가 Vue.js에 익숙해질 수 있도록 Vue.js 지침을 사용하여 탭 전환 효과를 구현합니다.
Laravel을 처음부터 학습하기: 컨트롤러 메소드 호출에 대한 자세한 설명
Mar 10, 2024 pm 05:03 PM
Laravel을 처음부터 배우기: 컨트롤러 메소드 호출에 대한 자세한 설명 Laravel 개발에 있어서 컨트롤러는 매우 중요한 개념입니다. 컨트롤러는 모델과 뷰 사이의 브리지 역할을 하며 경로의 요청을 처리하고 해당 데이터를 표시하기 위해 뷰에 반환합니다. 컨트롤러의 메서드는 경로로 호출할 수 있습니다. 이 문서에서는 컨트롤러에서 메서드를 작성하고 호출하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다. 먼저 컨트롤러를 만들어야 합니다. Artisan 명령줄 도구를 사용하여 생성할 수 있습니다.
PHP에서 CodeIgniter4 프레임워크를 사용하는 방법은 무엇입니까?
May 31, 2023 pm 02:51 PM
PHP는 매우 널리 사용되는 프로그래밍 언어이며 CodeIgniter4는 일반적으로 사용되는 PHP 프레임워크입니다. 웹 애플리케이션을 개발할 때 프레임워크를 사용하면 개발 프로세스 속도를 높이고 코드 품질을 향상시키며 유지 관리 비용을 줄일 수 있습니다. 이 기사에서는 CodeIgniter4 프레임워크를 사용하는 방법을 소개합니다. CodeIgniter4 프레임워크 설치 CodeIgniter4 프레임워크는 공식 홈페이지(https://codeigniter.com/)에서 다운로드할 수 있습니다. 아래에
라라벨 컨트롤러란?
Jan 14, 2023 am 11:16 AM
Laravel에서 컨트롤러(Controller)는 특정 기능을 구현하는 데 사용되는 클래스입니다. 컨트롤러는 관련 요청 처리 로직을 별도의 클래스로 결합할 수 있습니다. 일부 메서드는 특정 기능을 구현하기 위해 컨트롤러에 저장되며, 컨트롤러는 라우팅을 통해 호출되며, 컨트롤러는 더 이상 "app/Http/Controllers" 디렉터리에 저장됩니다.
Laravel 학습 가이드: 컨트롤러 메소드 호출 모범 사례
Mar 11, 2024 am 08:27 AM
Laravel 학습 가이드에서 컨트롤러 메서드 호출은 매우 중요한 주제입니다. 컨트롤러는 라우팅과 모델 사이의 브리지 역할을 하며 애플리케이션에서 중요한 역할을 합니다. 이 기사에서는 컨트롤러 메서드 호출에 대한 모범 사례를 소개하고 독자의 이해를 돕기 위해 특정 코드 예제를 제공합니다. 먼저 컨트롤러 메소드의 기본 구조를 이해해보자. Laravel에서 컨트롤러 클래스는 일반적으로 app/Http/Controllers 디렉터리에 저장됩니다. 각 컨트롤러 클래스에는 여러 개가 포함되어 있습니다.
입문부터 숙달까지, 2022년 최신 5개 Anglejs 튜토리얼
Jun 15, 2017 pm 05:50 PM
자바스크립트는 코드의 구성, 코드의 프로그래밍 패러다임, 객체지향 이론 측면에서 매우 독특한 언어입니다. 하지만 20년 동안 Javascript가 지배했음에도 불구하고 jQuery, Angularjs, 심지어 React와 같은 인기 프레임워크를 이해하려면 "Black Horse Cloud Classroom JavaScript Advanced Framework"를 시청하세요. 디자인 비디오 튜토리얼'을 참조하세요.
