By GokiSoft.com| 20:09 15/03/2022|
AngularJS

[Video] Tìm hiểu về customer directive + nested scope - Khóa học angularjs - C2110L


#vidu.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>AngularJS for beginer</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body ng-controller="MyController">
<menu></menu>
<menu></menu>

<div menu></div>

<div class="menu"></div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])

	// tag name, attribute, class
	// app.directive('menu', [function () {
	// 	return {
	// 		restrict: 'E',
	// 		template: `<ul>
	// 				<li style="color: red;">Menu</li>
	// 				<li>Vi du 1</li>
	// 				<li>Vi du 2</li>
	// 				<li>Vi du 3</li>
	// 			</ul>`
	// 	};
	// }])

	// app.directive('menu', [function () {
	// 	return {
	// 		restrict: 'A',
	// 		template: `<ul>
	// 				<li style="color: red;">Menu</li>
	// 				<li>Vi du 1</li>
	// 				<li>Vi du 2</li>
	// 				<li>Vi du 3</li>
	// 			</ul>`
	// 	};
	// }])

	// app.directive('menu', [function () {
	// 	return {
	// 		restrict: 'C',
	// 		template: `<ul>
	// 				<li style="color: red;">Menu</li>
	// 				<li>Vi du 1</li>
	// 				<li>Vi du 2</li>
	// 				<li>Vi du 3</li>
	// 			</ul>`
	// 	};
	// }])

	app.directive('menu', [function () {
		return {
			restrict: 'AEC',
			template: `<ul>
					<li style="color: red;">Menu</li>
					<li>Vi du 1</li>
					<li>Vi du 2</li>
					<li>Vi du 3</li>
				</ul>`
		};
	}])

	app.controller('MyController', ['$scope', function ($scope) {
		
	}])
</script>
</body>
</html>


#vidu2.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>AngularJS for beginer</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
<div ng-controller="MyController1">
	{{ title }}
	<button class="btn btn-danger" ng-click="checkContent()">Test</button>

	<div ng-controller="MyController3">
		{{ content }}
	</div>
</div>

<div ng-controller="MyController2">
	{{ title }}
</div>
<script type="text/javascript">
	var app = angular.module('MyApp', [])

	app.controller('MyController1', ['$scope', function ($scope) {
		$scope.title = 'Noi dung 1'
		$scope.content = 'test 01'

		$scope.checkContent = function() {
			alert($scope.content)
		}
	}])

	app.controller('MyController2', ['$scope', function ($scope) {
		$scope.title = 'Noi dung 2'
	}])

	app.controller('MyController3', ['$scope', function ($scope) {
		$scope.content = 'test 03'
	}])
</script>
</body>
</html>


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó