标签:src 数据 自定义 继承 text ESS 实现 tle 复习
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>复习directive</title>
<script type="text/javascript" src="../js/angular.js"></script>
</head>
<body ng-controller="myController">
<h4>父作用域:{{message}}</h4>
<input type="text" ng-model="message" />
<h4>子作用域:</h4>
<h4>scope={}时,子作用域和父作用域完全隔离</h4>
<div my-directive></div>
<h4>scope={"="}的时候,实现子作用域与父作用域的双向数据绑定</h4>
<div my-directive1 message="message"></div>
<h4>scope={"@"}时,实现子作用域和父作用域的单向数据绑定,
<br/>父作用域值的改变会影响子作用域,子作用域不会影响父作用域</h4>
<div my-directive2 message={{message}}></div>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function($scope){
$scope.message = "father info"
});
app.directive("myDirective", function(){
return {
restrict: "A",
scope: {
},
template: "<div ng-init=\"message='child info'\">child message:{{message}}<br /><input type='text' ng-model='message'/></div>"
};
});
app.directive("myDirective1", function(){
return {
restrict: "A",
template: "<div>child message:{{message}}<br /><input type='text' ng-model='message'/></div>",
scope: {
message: "="
}
}
});
app.directive("myDirective2", function(){
return{
retrict: "A",
template: "<div>child message:{{message}}<br/><input type='text' ng-model='message'/></div>",
scope: {
message: "@"
}
}
});
</script>
</body>
</html>
标签:src 数据 自定义 继承 text ESS 实现 tle 复习
原文地址:https://www.cnblogs.com/techi/p/11986502.html