angularjs - AngularJS $ watch改变元素的宽度

标签 angularjs resize bind directive watch

在过去的三天里,我一直在搜寻互联网,试图弄清楚当angular注意到div的宽度发生变化时如何使指令运行。
我不断看到相同的示例,说明如何实现此目标,但是它们对我不起作用,我也不知道为什么。

我回到一号广场。我要做的就是:当div的宽度改变时,更新div的css属性(具有指令作为属性)。

我需要知道如何获取角度以检查属性是否已更改。

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

.directive('stayPut', function () {
    var linker = function (scope, element, attrs) {

        scope.getElemWidth = function () {
            return element.width();
        };

        scope.$watch(scope.getElemWidth, 
            function (newWidth, oldWidth) {
                var deltaWidth = newWidth - oldWidth;

                console.log(deltaWidth);

                element.css('top', 
                    (parseInt(element.css('top')) + 
                    deltaWidth)                   +
                    'px');
        }, true);

        element.bind('resize', function () {
            scope.$apply();
        });
    };

    return {
        link: linker,
        restrict: 'A'
    }
});


我知道这里的问题是:

element.bind('resize', function () {
    scope.$apply();
});


我对它的工作方式有一个模糊的了解,但是我不明白为什么它在这里不起作用。

最佳答案

尝试使用此:

element.on('resize', function () {
    scope.$apply();
});

关于angularjs - AngularJS $ watch改变元素的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31634670/

相关文章:

javascript - 传递 ng-repeat 变量是未定义的

javascript - 访问 angularjs 范围变量并将其分配给 html 中的脚本标签属性

javascript - 使用 Karma 测试 Angular 代码时出现的问题

CSS更改文本区域上调整大小按钮的光标样式

html - 全宽 div 浏览器调整大小问题

jQuery:当元素显示时如何调用函数

c++ - std::bind 到局部变量作为值

c++ - 如果我们有 boost::bind,那么使用 boost::mem_fn 有什么意义?

javascript - Angular ui-router 禁用自动滚动以修复闪烁

jquery - 如何在窗口调整大小事件期间仅调用一次javascript函数?