只是自定义部分没有阻断父子间同步的操作
<html ng-app="myApp">
<head>
<meta charset="utf-8"/>
<title>自定义指令</title>
<script type="text/javascript" src="./angular.min.js"></script>
</head>
<!-- 现在的body算是父级 换句话说就是mainController是父级控制器, 而因为myConstroller在内部调用所以算作是子级 -->
<body ng-controller="mainController">
<h1>{{pmsg}}</h1>
<!-- 下面有别的调用形式 用双标签 下面的才显示 -->
<my-directive></my-directive>
<input type="text" name="" ng-model="pmsg">
<!-- -->
<!-- <div my-directive></div>
<div class="my-directive"></div> -->
<!-- directive:myDirective -->
<!-- 子级控制器链接着一个页面,所以这个html也算作子级的一部分
在子级里面也有一个input 并且也绑定了与父级同样的模块(ng-model="pmsg"),这样父子级无论谁发生改变另外一方都会改变
不利于高度复用 这样就会影响所有的子级
-->
</body>
<script type="text/javascript">
// 调用指令的形式 目前四种
// 直接写成标签 , 以属性方式加入标签,以类名方式,还有以注释的方式
var app=angular.module("myApp",[]);
app.controller("mainController",["$scope",function($scope){
$scope.pmsg="pmsg";
}]);
// app.directive("directiveName",function(){})
app.directive("myDirective",function(){
return{
restrict:"ECMA",//指令渲染方式 默认值为EA
// replace:true,//替换原节点 加上之后注释的调用方法会被实现,并且在控制台只剩下内部标签,外部的都消失(有M事必须为true)
// template: "<h1>第一个自定义指令</h1>",//模板内容 为HtmlString replace为true时,必须返回唯一一个根节点
templateUrl:"./xxx.html" //模板路径 这样就达到了与html联系在一起了 可以在指定的html中画页面
//注意的是这样联系起来之后 要在本地打开
controller:"myController",//指定或创建一个控制器
//controller: String | function
//为String时 之指定的控制器必须创建
//为function时 接收$scope的形参
// controller:function($scope){//这种写法有可能带来压缩问题 很少有这种方法创建控制器 一般都是外面创建好 名字传进来
// $scope.name ="sang"
// }
}
})
app.controller("myController",["scope",function($scope){
$scope.name = "sang"
}])
</script>
</html>```