如何访问具有隔离范围的指令属性?

2024-02-15

我需要访问指令创建的模型,同时我需要在指令中获取属性。

JS:

module.directive('createControl', function($compile, $timeout){
 return {            
   scope: {        
     name: '=Name' // Dynamically created ng-model in the directive element
   },
   link: function(scope, element, attrs){
     attrs.$observe('createControl', function(){
       attrs.createControl //is empty if scope is an object, otherwise it is passed from html attribute
     }
   }

HTML:

<div class="control-group" ng-repeat="x in selectedControls">
  <div create-control="{{ x }}"></div>
</div>

If scope被定义为一个对象,attrs为空,否则为从html传递的值。

这种行为的原因是什么?如何访问传递的属性和模型?


问题: create-control需要评估{{x}}在父范围内,但是通过使scope声明指令时的对象将创建一个隔离范围。这意味着attrs.createControl无权访问x。因此,它是空的。

一种解决方案:您可以通过多种方式解决此问题,其中最好的方法是将您的指令配置为接受scope.createControl通过属性进入其隔离范围。

工作小提琴: http://jsfiddle.net/pvtpenguin/tABt6/ http://jsfiddle.net/pvtpenguin/tABt6/

myApp.directive('createControl', function ($compile, $timeout) {
    return {
        scope: {
            name: '@', // Dynamically created ng-model in the directive element
            createControl: '@'
        },
        link: function (scope, element, attrs) {
            scope.$watch('createControl', function () {
                // the following two statements are equivalent
                console.log(attrs.createControl);
                console.log(scope.createControl);
            })
        }
    }
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何访问具有隔离范围的指令属性? 的相关文章

  • Android 设备上的 PhoneGap 蓝牙插件

    我一直在尝试让 PhoneGap 工作的蓝牙插件 但我似乎不知道哪里出了问题 首先 我的测试设备是 Galaxy S3 GT 19305T 应用程序是使用PhoneGap CLI http docs phonegap com en 3 0
  • 为什么 JavaScript base-36 转换看起来不明确

    我目前正在编写一段使用 Base 36 编码的 JavaScript 我遇到了这个问题 parseInt welcomeback 36 toString 36 看来要回归了 welcomebacg 我在 Chrome 开发者控制台和 Nod
  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中
  • 使用 useReducers 调度函数发送多个操作?

    使用时是否可以通过调度函数发送多个动作useReducer挂钩反应 我尝试向它传递一组操作 但这会引发未处理的运行时异常 明确地说 通常会有一个初始状态对象和一个减速器 如下所示 const initialState message1 nu
  • 使用模数按字母顺序对列表进行排序

    我在获取元素列表并按字母顺序对它们进行排序方面没有任何问题 但我很难理解如何使用模数来做到这一点 更新 这是按我的方式工作的代码 但是 我更喜欢下面提供的答案的可重用性 因此接受了该答案
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • AngularJS:初始化指令内的隔离范围

    我创建了一个指令 它接受一些属性并使用这些属性初始化隔离范围 如果未指定属性 则应使用计算值初始化隔离范围 我添加了一个链接函数 用于检查范围并初始化默认值 如果未使用属性设置值 范围已初始化 但如果我设置默认值 那么它稍后会被框架覆盖 一
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 将函数传递给指令以在链接中执行的正确方法

    我知道我们通常通过隔离范围将函数传递给指令 directive myComponent function return scope foo 然后在模板中我们可以这样调用这个函数
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 如何在 AngularJS 循环内使用标签

    所以我在里面ng repeat像这样 li li
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐