2014-06-09 5 views
3

각도 UI 모달 내에서 사용할 수있는 지시문을 만들어야합니다. 이 지시어는 모달 컨트롤러를 사용하기 위해 모달 컨트롤러에 대해서도 알아야한다. 나는 지금 무엇을 가지고 :각도 UI 모달 컨트롤러가 지시문에 표시되지 않습니다.

JS :

'use strict'; 

var DemoApp = angular.module('DemoApp', [ 'ui.bootstrap' ]); 

DemoApp.controller('PageController', ['$scope', '$modal', function($scope, $modal){ 
    $scope.openModal = function(){ 
    var scope = $scope.$new(true); 

    $modal.open({ 
     'templateUrl' : 'modal.html', 
     'controller' : 'ModalController', 
     'scope' : scope 
    }); 
    } 
}]); 

DemoApp.controller('ModalController', ['$scope', '$modalInstance', function($scope, $modalInstance){ 
    $scope.ok = function() { 
    $modalInstance.dismiss(); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss(); 
    }; 
}]); 

DemoApp.directive('expression', function() { 
    return { 
    restrict : 'A', 
    require : ['ngModel', '^ModalController'], 
    link : function(scope, element, attrs, controllers) { 
     console.log(arguments); 
    } 
    }; 
}); 

모달 템플릿 :

<div class="modal-header"> 
    <h3>Test!</h3> 
</div> 
<div class="modal-body"> 
    <input data-ng-model="someValue" expression>{{someValue}} 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" data-ng-click="ok()">Ok</button> 
    <button class="btn btn-warning" data-ng-click="cancel()">Cancel</button> 
</div> 

그리고 빨간 버튼 :

<button id="demoButton" class="btn btn-primary" data-ng-click="openModal()">Click me!</button> 

모달이 ModalController을 만들 때 그러나 해결, 나는 $compile:ctreq 오류가 발생되지 않은 : 나는에 노력 value = value || $element[retrievalMethod]('$' + require + 'Controller');, 그래서 : getControllers()angular.js에서 LOC 6433의 주위에 컨트롤러를 검색하는 데 사용됩니다

Error: [$compile:ctreq] http://errors.angularjs.org/1.2.17/$compile/ctreq?p0=ModalController&p1=expression 
    at Error (native) 
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:6:450 
    at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:80) 
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:137 
    at Array.forEach (native) 
    at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:7:280) 
    at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:51:114) 
    at N (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:54:128) 
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:47:82) 
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js:47:99) <input data-ng-model="someValue" expression="" class="ng-pristine ng-valid"> 

내가 코드를 디버깅하려고 ModalController 대신 Modal이 필요하지만 (Controller은 Angular로 추가됩니다) 도움이되지 않습니다. $element[retrievalMethod]가 어떻게 작동하는지 이해할 수는 없지만 저수준에 해당됩니다. 그래서, 나는 붙어있어 어떤 도움을 주셔서 감사합니다.

Plunk을 만들었으므로 콘솔에서 놀고 볼 수 있습니다.

+2

지시문은 링크 함수에 전달 된 범위를 통해 ModalController의 $ scope에있는 함수에 액세스 할 수 있습니다. 또는 누락 된 다른 사용 사례에 해당합니까? – tasseKATT

+1

또한,'require'는 컨트롤러에 접근하고자하는 지시자의 이름을 취합니다, 그래서 컨트롤러 이름을 지정하면 작동하지 않을 것입니다. 콧대가 말하듯이 '범위'만 사용하십시오. –

+0

@AnthonyChu 나는 확실히 그것을 워드 프로세서에서 놓친 것을 지적 해 주신 것에 감사드립니다! – madhead

답변

3

은, 체크 아웃은 plunker를 업데이트하십시오 : 당신이 ModalController에 변수를 전달해야하는 경우 직접 종속성을 해결을 통해 그것을해야하므로

  1. ModalController 범위, PageController의 하위 범위가 아닙니다.

  2. 지시문에서 범위를 ModalController 범위의 자식으로 설정할 수 있으므로 ModalController 대신에 정의 된 함수에 액세스 할 수 있습니다.

+0

와우, 너무 간단! 내 일이 너무 복잡해 졌어! 고맙습니다. – madhead

관련 문제