angularjs指令之间的数据交互

小咪咪 2023-06-29 13:57 10阅读 0赞

指令可以通过独立作用域接收数据， 使用=，如

app.directive('myDirective', function() {
      return {
        restrict: 'E',
        transclude: true,
        scope: {
          option: '=option'  //key相同时也可以使用option: '='
        },
        template: '<p>{
       {option.title}}</p>'
      };

使用：  
<myDirective option="\{title: “标题”\}">

同样的，也可以用&来接收一个回调函数：

app.directive('myDirective', function() {
      return {
        restrict: 'E',
        transclude: true,
        scope: {
          option: '=option',
          click: '&myClick' // &
        },
        template: '<p ng-click="click({backData: data})">{
       {option.title}}</p>',
        link: function($scope, element, attr) {
          $scope.data = {
            name: 'angularjs',
            part: 'directive'
          }
        }
      };

使用：angularjs的html模板不支持驼峰命名规则，所有在html中要使用-，

注意：

第一次使用的时候很容易入坑，比如这个错误  
TypeError: Cannot use ‘in’ operator to search for ‘confirm’ in。  
解决：  
原因是指令中ng-click="click(\{backData: data\})"回调传入的参数必须是一个对象，并且在接收变量的时候my-click="showData(backData)"必须单独接收对象中的属性，可以同时接收多个属性。

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 angularjs指令之间的数据交互

指令可以通过独立作用域接收数据，使用=，如 app.directive('myDirective', function() { return {

小咪咪/ 2023年06月29日 13:57/ 0 赞/ 11 阅读

相关 AngularJS 世界------AngularJS 指令手册

AngularJS 内置指令的基本说明 AngularJS 内置的指令 <table> <thead> <tr> <th>序号</th>

痛定思痛。/ 2023年02月08日 13:00/ 0 赞/ 22 阅读

相关 AngularJs-指令和控制器交互

1，指令和控制器的交互 <!DOCTYPE html> <html ng-app="MyController"> <head> <me

比眉伴天荒/ 2022年08月22日 15:35/ 0 赞/ 198 阅读

相关 AngularJS 指令

指令（directives）是任何AngularJS应用中最重要的成分。尽管AngularJS已经自带了很多指令，你经常会发现需要自己亲手创建一些特别的指令。本文将会带你了解自

向右看齐/ 2022年08月21日 07:56/ 0 赞/ 255 阅读

相关指令与控制器交互，指令与指令交互

慕课网《AngularJS实战》–指令3笔记，点击打开链接一、不同指令对应不同控制器方法（指令的复用） Directive&Controller.js va

我会带着你远行/ 2022年08月20日 12:24/ 0 赞/ 247 阅读

相关 AngularJS Directive 隔离 Scope 数据交互

什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性，例如在模版中直接使用父 scope 中的对象和属性。通常使用这

约定不等于承诺〃/ 2022年07月17日 00:45/ 0 赞/ 180 阅读

相关 AngularJS(二)——认识AngularJS的指令系统

The first girlfriend – AngularJS 前言: 女神的华丽长袍 ![来了--女神的华丽长袍][--] --------------

╰半夏微凉°/ 2022年06月17日 03:59/ 0 赞/ 256 阅读

相关 AngularJs-指令和控制器交互

[AngularJs-指令和控制器交互][AngularJs-] 前言：　　前段时间我们学习了angular的指令，他通过ECMA的方式创建元素，可以让我

超、凢脫俗/ 2022年06月05日 01:07/ 0 赞/ 229 阅读

相关 AngularJS 指令

什么是 AngularJS？ AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。 Angul

ゝ一纸荒年。/ 2022年05月09日 07:40/ 0 赞/ 292 阅读

相关 AngularJs 指令

AngularJs框架指令(可以理解为属性) 在标签指令中书写的NG变量不用带$scope. 1、边界指令ng-app

爱被打了一巴掌/ 2021年07月24日 20:18/ 0 赞/ 493 阅读