angular指令操作修改外层数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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 @   剧里局外  阅读(23)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
历史上的今天:
2020-10-31 vue中使用echarts图表功能,点击事件改变父级div窗体大小,echarts图表展示也跟着改变
点击右上角即可分享
微信分享提示