angular指令操作修改外层数据 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>指令学习</title>
    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
    
</head>

<body ng-app='app'>
    <div ng-controller="myController">
     <div ng-click="topClick('test')">我是父类</div>
     <input type="text" ng-model="myaddress"/>
     <hr>
     {{myaddress}}aaa
     <hr>
     ccc
     <hr>
     <my-directive  my-data="myaddress" my-click="otherClick(sonData)"></my-directive>
    </div>
</body>
<script type="text/javascript">
  var app = angular.module('app', []);
    app.directive('myDirective',myDirective);
    function myDirective(){
      var directive={
          restrict:'AE',
          template:"<div ng-click='sonClick(1111)'>点击我</div><div>{{innerData}}</div>",
         //  template:"<div ng-click='selectData({ sonData :11111})'>点击我</div><div>{{innerData}}</div>",//这个也可以
          scope:{
            selectData:"&myClick",//selectData 这个可以在指令内部直接使用
            innerData:"=myData"//myData作为指令属性使用这里且是共享的,可以双向改变
          },
          link:function(scope,ele,attr){ //参考文章https://www.cnblogs.com/fanzhengshao/p/6006220.html
            scope.sonClick=function(zhilingcanshu){ //sonClick这个是封装一层并在里面调用
             // scope.innerData="aaa"; // innerData只在指令内部使用
              scope.selectData({ sonData :zhilingcanshu});
            
            }
          }
       }
       return directive;
    };
    app.controller("myController",["$scope",function($scope){
        $scope.topClick = function(aa){
            alert(aa);
        }
        $scope.otherClick = function(aa){
            $scope.myaddress=aa; 
        }
        $scope.myaddress="广州"; //初始化数据
    }])
  </script>
</html>

　　初始化效果

 

 点击后

 总结要么直接使用定义的方法

selectData({ sonData :11111})
          template:"<div ng-click='selectData({ sonData :11111})'>点击我</div><div>{{innerData}}</div>",//这个也可以

要么封装一层，且在link 函数里面

 link:function(scope,ele,attr){ //参考文章https://www.cnblogs.com/fanzhengshao/p/6006220.html
            scope.sonClick=function(zhilingcanshu){ //sonClick这个是封装一层并在里面调用
             // scope.innerData="aaa"; // innerData只在指令内部使用
              scope.selectData({ sonData :zhilingcanshu});
            
            }
          }

参考：https://www.cnblogs.com/fanzhengshao/p/6006220.html

posted @ 2022-10-31 23:19  剧里局外  阅读(28)  评论(0)    收藏  举报