简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

AngularJS之依赖注入（实例一）

黄舟
Libérer： 2017-02-18 13:33:11
original
945 Les gens l'ont consulté

1、问题背景

     AngularJS特有的一个依赖注入，当在一个对象创建时，需要依赖另一个对象。


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS之依赖注入（实例一）</title>
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<style>
			body,html{
				font-family: "微软雅黑";
				font-size: 12px;
				font-feature-settings: on;
			}
			.showContent{
				width: 200px;
				padding: 10px;
				margin: 10px;
				border: 1px dashed #2AABD2;
			}
		</style>
		<script>
			var app = angular.module("reApp",[]);
			app.config(function($controllerProvider){
				$controllerProvider.register("reCon",["$scope",function($scope){
					$scope.content = "";
					$scope.clickShow = function(){
						$scope.content = "showContent";
						$scope.showContent = "依赖注入";
					};
				}]);
			});
		</script>
	</head>
	<body ng-app="reApp">
		<p ng-controller="reCon">
			<button type="button" ng-click="clickShow();">依赖注入</button><br><br>
			<label class="{{content}}">{{showContent}}</label>
		</p>
	</body>
</html>
Copier après la connexion


3、实现结果

（1）初始化

   1173.png

（2）点击按钮时

1174.png

 以上就是AngularJS之依赖注入（实例一）的内容，更多相关内容请关注PHP中文网（www.php.cn）！


  

Étiquettes associées：
angularjs 依赖注入
source：php.cn
Article précédent：AngularJS之对话框 Article suivant：AngularJS之$watch方法（监控动作）
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
En cliquant sur le bouton, le formulaire sera actualisé. J'ai un formulaire en Angular avec deux étiquettes de boutons. Un bouton soumet le formula...
Depuis 2023-08-14 20:46:02
0
2
205
Qu'est-ce que la version angulaire ? /** * @license AngularJS v1.7.5 * (c) 2010-2018 Google, Inc. http://angularjs.org * Licenc...
Depuis 2018-10-17 22:49:39
0
0
966
javascript - Comment AngularJS interroge-t-il le menu de deuxième niveau en fonction du menu de premier niveau? Interrogez l'industrie secondaire via l'industrie primaire et interrogez l'industrie prima...
Depuis 2017-07-07 10:34:54
0
4
1254
javascript - Je suis nouveau sur AngularJS+express et / dans le chemin de routage est converti en %2F, ce qui rend le chemin invalide. Pouvez-vous me dire pourquoi ? La page s'ouvre comme suit. Cliquez sur le lien de l'ordinateur et le chemin de l'URL s'af...
Depuis 2017-07-05 11:07:44
0
1
867
javascript - L'URL AngularJS du routeur ui s'affiche normalement et la page ne change pas ? Apprenez AngularJS et ajoutez automatiquement list.html à ui-routerindex.html. Cliquez sur...
Depuis 2017-07-05 11:06:15
0
1
739
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！