小编Lig*_*ted的帖子

AngularJS $监视窗口调整指令内部的大小

我有暴露模块模式,看起来像这样:

'use strict';

angular.module('app', [])
   .directive('myDirective', ['SomeDep', function (SomeDep) {
       var linker = function (scope, element, attr) {
          // some work
       };

       return {
          link: linker,
          restrict: 'E'
       };
   }])
;
Run Code Online (Sandbox Code Playgroud)

我遇到的问题是将$ watch集成到这里.通过'$ window'服务专门观看窗口调整大小.

[编辑]:

我一直意识到我的问题是什么......当我忘记我将它作为属性实现时,我正在限制元素... @ _ @;

resize directive window watch angularjs

48
推荐指数
2
解决办法
10万
查看次数

AngularJS $watch 元素宽度变化

在过去的 3 天里,我一直在网上搜索,试图找出当 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'
    }
});
Run Code Online (Sandbox Code Playgroud)

我知道这里的问题是:

element.bind('resize', function () {
    scope.$apply();
});
Run Code Online (Sandbox Code Playgroud)

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

resize bind directive watch angularjs

6
推荐指数
1
解决办法
2769
查看次数

在“鼠标按下”时处理“鼠标离开”

我创建了一个带有独特边框样式的 div 的自定义按钮。我正在尝试处理“鼠标按下”以切换边框颜色以产生缩进的错觉。然后处理“mouseup”以切换回默认值。

问题是当鼠标离开按钮并且“mouseup”被触发时,它不再由 div 处理。我尝试拦截“mouseleave”,我尝试添加点击时的数据属性(不会更新),我尝试添加一个名为“imclicked”的带有 .addClass 的临时类(无法让它工作) .

我真的很挣扎。

到目前为止,这是我的代码:

function ToggleBorder() {
    // Get Border Colours
    //-----------------------------------
    var top    = $(this).css("borderTopColor"),
        right  = $(this).css("borderRightColor"),
        bottom = $(this).css("borderBottomColor"),
        left   = $(this).css("borderLeftColor");

    // Assign new Colours
    //-----------------------------------
    $(this).css("borderTopColor", bottom);
    $(this).css("borderLeftColor", right);
    $(this).css("borderBottomColor", top);
    $(this).css("borderRightColor", left);
}

$(".main-nav-button").mousedown(ToggleBorder);

$(".main-nav-button").mouseup(ToggleBorder);

$(".main-nav-button").mouseleave(function() {
    // test for mousedown
});
Run Code Online (Sandbox Code Playgroud)

我该怎么做才能切换回 mouseleave 的默认边框?

css jquery mouseleave mouseup mousedown

5
推荐指数
1
解决办法
1488
查看次数

标签 统计

angularjs ×2

directive ×2

resize ×2

watch ×2

bind ×1

css ×1

jquery ×1

mousedown ×1

mouseleave ×1

mouseup ×1

window ×1