当前位置: 首页 > 面试题库 >

Angular JS观察指令属性

锺离飞飙
2023-03-14
问题内容

angular js如何监视自定义指令上的属性以接受要绑定的角度值

这是我到目前为止的内容:

<tile title="Sleep Duration" data-value="{{sleepHistory.averageSleepTime}}"/>

app.directive('tile', [function() {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            var title = attrs.title;

            attrs.$observe('dataValue', function(val) {
                var data = val;

                console.log(data);

                var dom =
                    "<div>" +
                    "<p>" + title + "</p>" +
                    "<p>" + data + "</p>" +
                    "</div";

                $(element).append($(dom.trim()));
            });
        }
    };
}]);

但观察到的值返回为未定义


问题答案:

来自http://docs.angularjs.org/api/ng.$compile.directive.Attributes:

所有这些在Angular中均视为等效:

<span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a">

所以属性data-value归一化为value

因此,这就是您想要的:

attrs.$observe('value', function(val) {


 类似资料:
  • 问题内容: 这不是一件很难的事,但我无法弄清楚如何做到最好。 我有一个父指令,像这样: 和一个子指令: 如何从子指令轻松访问父指令的和属性?在我的链接函数中,我可以访问父级作用域-我应该用来观察这些属性吗? 放在一起,我想拥有的是: 这个想法是默认情况下显示一组字段。如果单击,它们将成为输入并可进行编辑。 问题答案: 从这篇SO帖子中汲取灵感,我在这个笨拙的人中有一个可行的解决方案。 我不得不改变

  • 问题内容: 我的AngularJS模板包含一些自定义HTML语法,例如: 我创建了一个指令来处理它: 一切正常,但表达式始终返回,即使在执行时从Google Chrome浏览器的JavaScript控制台可见该属性,该表达式始终返回。 有什么建议吗? 更新:Artem提供了一种解决方案。它包括这样做: AngularJS + stackoverflow =幸福 问题答案: 请参阅指令文档中的属性一

  • 我的AngularJS模板包含一些自定义HTML语法,例如: AngularJS+stackoverflow=bliss

  • 问题内容: 我认为开箱即用的指令上使用众所周知的角度属性应该很容易。 例如,如果我的指令名称是myDirective,我想以这种方式使用它: 无需像下面的示例一样定义自定义点击属性(onClick) 似乎ng-click可以工作,但是您也需要在指令标签上也指定ng-controller,这也是我所不希望的。我想在周围的div上定义控制器 是否可以在指令上使用ng-click以及在父html元素上定

  • 问题内容: 我有一个双向数据绑定,它不会更改发送到指令的变量的值。 我的指令监视触发器,并将焦点集中在associates元素上(基于在SO处找到的代码): 在HTML中,我将其称为: 当我第一次触发它时,它可以工作- 因为变量会切换其值。但是在控制器范围内(指令外部)不会在指令完成时切换回原来的状态。 假设我了解应该发生的情况,则在致电时切换回应该发生的情况。 缺少什么会导致双向绑定不将值推回传

  • 主要内容:AngularJS 指令,AngularJS 实例,数据绑定,AngularJS 实例,重复 HTML 元素,AngularJS 实例,AngularJS 实例,ng-app 指令,ng-init 指令,ng-model 指令,ng-repeat 指令,创建自定义的指令,AngularJS 实例,限制使用AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令