Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 多个指令[myPopup,myDraggable]要求新的/隔离的范围大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我写了一个指令对话框(myPopup)和另一个拖动这个对话框(myDraggablE),但我总是得到的错误

这是一个Plunker:http://plnkr.co/edit/kMQ0hK5RnVw5xOBdDq5P?p=preview

我能做什么?

JS代码

var app = angular.module('myApp',[]);

function myController($scopE) {
    $scope.isDraggable = true;
}


app.directive('myPopup',[
    function () {
        "use Strict";

        return {
            reStrict: 'E',replace: true,transclude: true,template: '<div my-draggable="draggable"class="dialog"><div class="title">{{titlE}}</div><div class="content" ng-transclude></div></div>',scope: {
                title: '@?dialogtitle',draggable: '@?isDraggable',width: '@?width',height: '@?height',},controller: @R_618_1013@) {
                // Some code
            },link: function (scope,element,attr) {
                if (scope.width) {
                    element.css('width',scope.width);
                }

                if (scope.height) {
                    element.css('height',scope.height);
                }                    
            }
        };
    }
]);

app.directive('myDraggable',['$document',function ($document) {
    return {
        reStrict: 'A',replace: false,scope: { enabled: '=myDraggable' },elm,attrs) {
            var startX,startY,initialMouseX,initialMouseY;

            if (scope.enabled === truE) {
                elm.bind('mousedown',function ($event) {
                    startX = elm.prop('offsetLeft');
                    startY = elm.prop('offsetTop');
                    initialMouseX = $event.clientX;
                    initialMouseY = $event.clientY;
                    $document.bind('mousemove',mousemovE);
                    $document.bind('mouseup',mouseup);
                    $event.preventDefault();
                });
            }

            function getMaxPos() {
                var computetStyle = getComputedStyle(elm[0],null);
                var tx,ty;
                var transformOrigin =
                    computetStyle.transformOrigin ||
                    computetStyle.webkitTransformOrigin ||
                    computetStyle.MozTransformOrigin ||
                    computetStyle.msTransformOrigin ||
                    computetStyle.oTransformOrigin;
                tx = Math.ceil(parseFloat(transformOrigin));
                ty = Math.ceil(parseFloat(transformOrigin.split(" ")[1]));
                return {
                    max: {
                        x: tx + window.innerWidth - elm.prop('offsetWidth'),y: ty + window.innerHeight - elm.prop('offsetHeight')
                    },min: {
                        x: tx,y: ty
                    }
                };
            }

            function mousemove($event) {
                var x = startX + $event.clientX - initialMouseX;
                var y = startY + $event.clientY - initialMouseY;
                var limit = getMaxPos();
                x = (x < limit.max.X) ? ((x > limit.min.X) ? x : limit.min.X) : limit.max.x;
                y = (y < limit.max.y) ? ((y > limit.min.y) ? y : limit.min.y) : limit.max.y;
                elm.css({
                    top: y + 'px',left: x + 'px'
                });
                $event.preventDefault();
            }

            function mouseup() {
                $document.unbind('mousemove',mousemovE);
                $document.unbind('mouseup',mouseup);
            }
        }
    };
}]);
docs

尝试删除隔离范围myDraggable的指令:

app.directive('myDraggable',//remove this line

将scope.enabled替换为attrs.enabled:

if (attrs.enabled == "true") {

修改您的模板以绑定enable属性

<div my-draggable="draggable" enabled="{{draggablE}}"

DEMO

大佬总结

以上是大佬教程为你收集整理的angularjs – 多个指令[myPopup,myDraggable]要求新的/隔离的范围全部内容,希望文章能够帮你解决angularjs – 多个指令[myPopup,myDraggable]要求新的/隔离的范围所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。