独立scope案例

最新推荐文章于 2024-09-20 21:48:23 发布

程序媛~婷

最新推荐文章于 2024-09-20 21:48:23 发布

阅读量137

点赞数

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/litingyuki/article/details/83551635

版权

Angular 专栏收录该内容

9 篇文章

订阅专栏

本文展示了一个使用AngularJS创建的具有独立作用域的指令示例。通过定义一个名为hello的指令，实现了多个实例之间的数据隔离，每个实例都有其自己的输入框和绑定变量。这有助于理解和应用AngularJS中的作用域概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html ng-app="MyModule">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>独立作用域</title>
	<link rel="stylesheet" href="CSS/bootstrap.css">
<script src="angular.min.js"></script>


</head>

<body>
		<hello></hello>
		<hello></hello>
		<hello></hello>
		<hello></hello>

</body>
<script>
	var myModule = angular.module("MyModule",[]);

    myModule.directive("hello",function(){
        return{
            scope :{},
            restrict : 'AE',
			template : '<div><input type="text" ng-model="username"/>{{username}}</div>',
			replace : true
        }
	})


</script>
</html>