새로운/분리된 범위를 요구하는 여러 지시 [myPop, myDraggable]

새로운/분리된 범위를 요구하는 여러 지시 [myPop, myDraggable]

대화 상자(myPopup)와 이 대화 상자(myDraggable)에 대한 지시문을 작성했지만 항상 다음 오류가 발생합니다.

새로운/분리된 범위를 요구하는 여러 지시 [myPop, myDraggable]

다음은 플런커입니다.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' },

        link: function (scope, 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);
            }
        }
    };
}]);

문서로부터:

동일 요소에 적용되는 복수의 호환되지 않는 지시의 예는 다음과 같습니다.

격리된 범위를 요구하는 여러 명령어.

여러 디렉티브가 같은 이름으로 컨트롤러를 퍼블리시하고 있습니다.

다중 지시문이 transclusion 옵션과 함께 선언되었습니다.

템플릿 또는 템플릿을 정의하려고 하는 여러 지시문URL 입니다.

에서 격리 .myDraggable의 지시 명령어:

app.directive('myDraggable', ['$document',
    function ($document) {
    return {
        restrict: 'A',
        replace: false,
        scope: { enabled: '=myDraggable' }, //remove this line

scope.enabledattrs.enabled:

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

또한 템플릿을 변경하여 enable Atribute를 바인드합니다.

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

데모

DOM 요소가 시도된 격리 범위와 충돌을 일으키고 있습니다.따라서 격리 범위가 필요한지 여부를 항상 자문해야 합니다.

「」의 격리 하는 것을 .myDraggable 값과 마찬가지로 myDraggable의 에 액세스합니다.link★★★★★★ 。

<div class="draggable" my-draggable="{{isDraggable}}">I am draggable {{isDraggable}}</div>

...

replace: false,

link: function (scope, elm, attrs) {
  var startX, startY, initialMouseX, initialMouseY,
      enabled = attrs.myDraggable === 'true';
  if (enabled === true) {

...

여기에서 업데이트된 Plunker를 보고 myPopup 템플릿의 변경 사항을 확인하십시오.

myDraggable Atribute의 변경을 확인하려면 다음과 같이 구현합니다.

attrs.$observe('myDraggable', function(iVal) {
  enabled = iVal === 'true';
  // AND/OR
  if (iVal === 'true') doSomething();
});

"Angular Attribute Docs $observe 함수" 참조

내 오류도 비슷했다.

오류: [$compile: multidir] 여러 지시 [groups, groups]가 다음 항목에 대한 새/분리된 범위를 요청합니다.

제 경우, 제 경우엔

 .component('groups', new GroupsComponent()); 

app.disc/app.ts 파일에서

동시에 컴포넌트 자체에

const groups = angular.module('groups', ['toaster'])
.component('groups', new GroupsComponent());

app.js/app.ts에서 삭제하면 문제가 해결.

나도 비슷한 상황에 처했다., 양쪽 디렉티브에 를 설정할 가 있는 는, 「」을 삭제하는 것을 합니다.replace: true 지시어 myPopup 명령어 합니다.

그것을 회피하는 방법이 있다.

명령어 범위를 분리하지 않고 $new method를 사용하여 새로운 분리 범위를 만듭니다.이 메서드는 새 하위 스코프를 생성합니다. 첫 번째 파라미터에서 true를 사용하면 격리 스코프가 생성됩니다.

참인 경우 스코프는 상위 스코프에서 프로토타입으로 상속되지 않습니다.부모 > 스코프 속성을 표시할 수 없기 때문에 스코프는 분리되어 있습니다.위젯을 생성할 때 위젯이 실수로 상위 상태를 읽지 않도록 하는 데 유용합니다.

단, 디렉티브링크 기능에 의해 프라이빗 스코프에 액세스 할 수 있기 때문에 문제가 되지 않습니다.따라서 "부모" 및 격리된 스코프와 병행하여 격리된 스코프를 가진 디렉티브의 매우 근접한 동작으로 동작시킬 수 있습니다.

아래의 예를 참조하십시오.

app.directive('myDraggable', ['$document',
    function ($document) {
    return {
        restrict: 'A',
        replace: false,
        scope: false,
        //scope: { enabled: '=myDraggable', oneWayAttr: "@" }, //Just for reference I introduced a new 
        link: function(parentScope, elem, attr) {
        var scope = parentScope.$new(true); //Simulated isolation.
            scope.oneWayAttr = attr.oneWayAttr; //one-way binding @
            scope.myDraggable = parentScope.$parent.$eval(attr.myDraggable);

            scope.watchmyDraggable = function () {
                    return scope.myDraggable = parentScope.$parent.$eval(attr.myDraggable); //parent -> isolatedscope
            };          
            scope.$watch(scope.watchmyDraggable, function(newValue, oldValue) {
             //(...)
            });

            parentScope.innerScope = scope; //If you need view access, you must create a kind of symbolic link to it.

        //(...)
        }

저는 이 작업을 검증 지침에 따라 개발했습니다. 매우 효과적입니다.

앱을 압축할 때 지시어 js파일을 두 번 첨부했습니다.이것이 에러의 원인이 되었다.

범위: {enabled: '=myDraggable' }은(는) 필요 없습니다.그래서:

  return {
    restrict: 'A',
    replace: false,
    link: function (scope, elm, attrs) {

언급URL : https://stackoverflow.com/questions/22303368/multiple-directives-mypopup-mydraggable-asking-for-new-isolated-scope