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: function ($scope) { // 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 – Identity Server身份验证,无需请求用户权限
- 在Scala中有条件地调用一个方法
- BootStrap中Table隐藏后显示问题的实现代码
- Spotify docker-maven-plugin未经授权:身份验证需要公开回
- angularjs – 如何在Angular UI Datepicker中禁用年/月导航
- angularjs – 如何使用打字稿制作Angular服务?
- angularjs – ocLazyLoad中的模块如何加载,并行或按顺序加载
- ng2-validation/angular2表单验证模块使用方法
- 《数据结构》第一章 知识点结构导图
- 渲染404,而不是在angularjs中重定向404