지시에 필요한 컨트롤러를 찾을 수 없음

지시에 필요한 컨트롤러를 찾을 수 없음

다른 지시사항이 있어서 전화를 걸 수 있으면 좋겠습니다.저는 이를 달성하기 위해 지시 컨트롤러를 사용하려고 노력해 왔습니다.

지시 1은 지시 2와 같은 페이지에 위치하고 지시 1은 지시 2의 컨트롤러에 의해 노출된 방법을 호출합니다.

지침 1:

'use strict';
angular.module('angularTestApp')
    .directive('fileLibrary', function () {
        return {
            templateUrl: 'views/manage/file_library/file-library.html',
            require: 'videoClipDetails',
            restrict: 'AE',
            link: function postLink(scope, element, attrs, videClipDetailsCtrl) {
                scope.doSomethingInVideoClipDirective = function() {
                    videClipDetailsCtrl.doSomething();
                }
            }
        };
    });

지침 2:

'use strict';
angular.module('angularTestApp')
    .directive('videoClipDetails', function () {
        return {
            templateUrl: 'views/video_clip/video-clip-details.html',
            restrict: 'AE',
            controller: function($scope, $element) {
                this.doSomething = function() {
                    console.log('I did something');
                }
            },
            link: function postLink(scope, element, attrs) {
                console.log('videoClipDetails directive');
                //start the element out as hidden
            }
        };
    });

두 개가 형제자매로 사용되고 설정되는 파일:

<div>
    <div video-clip-details></div>
    <!-- main component for the file library -->
    <div file-library></div>
</div>

지시사항이 동일한 요소에 있을 때 컨트롤러를 공유할 수 있다는 문서를 읽은 것을 알고 있기 때문에 이 문제를 잘못 보고 있는 것이 아닌가 하는 생각이 듭니다.누가 나를 올바른 길로 인도해 줄 수 있습니까?

지시사항에 대한 angular.js 문서에서

명령어가 다음을 사용할 때require,$compile지정된 컨트롤러가 발견되지 않는 한 오류가 발생합니다.^prefix는 이 지시문이 부모에서 컨트롤러를 검색한다는 것을 의미합니다(없는 경우).^prefix, 명령어는 단지 자신의 요소에서 컨트롤러를 찾을 것입니다).

따라서 기본적으로 형제자매가 직접 의사소통을 하도록 하는 것은 불가능합니다.저는 이와 같은 문제에 부딪혔지만 의사소통을 위해 서비스를 이용하고 싶지 않았습니다.제가 생각해낸 것은 형제자매인 자녀간의 의사소통을 관리하기 위해 부모지시를 사용하는 방법이었습니다.github에 예문을 올렸습니다.

두 자녀 모두 부모를 필요로 한다는 것입니다.require: '^parentDirective') 및 자신의 컨트롤러가 링크 기능에 전달됩니다.거기서 각 자식은 일종의 API로서 부모 컨트롤러와 모든 공개 방법에 대한 참조를 얻을 수 있습니다.

아래는 아이들 중 한명입니다.itemEditor

function itemEditor() {
    var directive = {
        link: link,
        scope: {},
        controller: controller,
        controllerAs: 'vm',
        require: ['^itemManager', 'itemEditor'],
        templateUrl: 'app/scripts/itemManager/itemManager.directives.itemEditor.html',
        restrict: 'A'
    };

    return directive;

    function link(scope, element, attrs, controllers) {
        var itemManagerController = controllers[0];
        var itemEditorController = controllers[1];

        itemEditorController.itemManager = itemManagerController;

        itemEditorController.initialize();
    }

    function controller() {
        var vm = this;

        // Properties
        vm.itemManager = {};
        vm.item = { id: -1, name: "", size: "" };

        // Methods
        vm.initialize = initialize;
        vm.updateItem = updateItem;
        vm.editItem = editItem;

        // Functions
        function initialize() {
            vm.itemManager.respondToEditsWith(vm.editItem);
        }

        function updateItem() {
            vm.itemManager.updateItem(vm.item);
            vm.item = {};
        }

        function editItem(item) {
            vm.item.id = item.id;
            vm.item.name = item.name;
            vm.item.size = item.size;
        }
    }
}

값이 어떻게 전달되었는지를 기록합니다.requirearray는 상위 지시어의 이름과 현재 지시어의 이름입니다.그러면 둘 다 접근할 수 있습니다.link를 통해 기능합니다.controllers매개 변수.부모 지시어의 컨트롤러를 현재 자식의 속성으로 할당한 다음 해당 속성을 통해 자식의 컨트롤러 기능 내에서 액세스할 수 있습니다.

또한 아동 보호 지침에 있는 방법을 주목하십시오.link내가 부르는 함수initialize기능을 실행할 수 있습니다.이곳은 통신선의 일부가 설치되어 있는 곳입니다.

내 말은 기본적으로 당신(부모 지시)이 항목을 편집하라는 요청을 받을 때마다 내 이름의 이 방법을 사용하라는 것입니다.editItem그것은 필요합니다.item매개 변수로서

여기 부모 지침이 있습니다.

function itemManager() {
    var directive = {
        link: link,
        controller: controller,
        controllerAs: 'vm',
        templateUrl: 'app/scripts/itemManager/itemManager.directives.itemManager.html',
        restrict: 'A'
    };

    return directive;

    function link(scope, element, attrs, controller) {

    }

    function controller() {
        var vm = this;

        vm.updateMethod = null;
        vm.editMethod = null;

        vm.updateItem = updateItem;
        vm.editItem = editItem;
        vm.respondToUpdatesWith = respondToUpdatesWith;
        vm.respondToEditsWith = respondToEditsWith;

        function updateItem(item) {
            vm.updateMethod(item);
        }

        function editItem(item) {
            vm.editMethod(item);
        }

        function respondToUpdatesWith(method) {
            vm.updateMethod = method;
        }

        function respondToEditsWith(method) {
            vm.editMethod = method;
        }
    }
}

여기 부모님에게서 볼 수 있는 것은respondToEditsWith메서드를 매개 변수로 사용하고 해당 값을 해당 매개 변수에 할당합니다.editMethod소유물.이 속성은 컨트롤러가 실행될 때마다 호출됩니다.editItem메소드라고 불리며.item오브젝트가 전달되므로 하위 지시어를 호출합니다.editItem방법데이터를 저장하는 것도 반대로 같은 방식으로 작동합니다.마찬가지로 데이터 저장도 반대로 같은 방식으로 작동합니다.

업데이트: 그나저나, 여기 coderwall.com 의 블로그 게시물이 있는데, 거기서 나는 좋은 예들과 함께 원래의 아이디어를 얻었습니다.require지시사항에 따라 컨트롤러 옵션을 선택할 수 있습니다.그렇기는 하지만, 그 게시물의 마지막 예시에 대한 그의 추천 구문은 나에게 효과가 없었고, 그래서 내가 위에서 언급한 예시를 만든 것입니다.

여기서 하려는 방식으로 형제 요소 간에 의사소통을 할 필요가 있는 실제 방법은 없습니다.두 지시어가 동일한 요소에 있는 경우 요구사항은 사용자가 설정한 방식으로 작동합니다.

그러나 두 지시어 모두 사용할 관련 템플릿 URL을 가지고 있으며 요소당 하나만 가질 수 있으므로 이 작업을 수행할 수 없습니다.

html을 약간 다르게 구성하여 이것이 작동할 수 있도록 할 수 있습니다.기본적으로 하나의 지시어를 다른 지시어 안에 넣고 사용해야 합니다(배제).require: '^videoClipDetails'. 그것을 찾기 위해 부모님에게 의지할 것이라는 의미.저는 이것을 보여주기 위해 바이올린을 키웠습니다. http://jsfiddle.net/WwCvQ/1/

다음은 상위 항목을 작동시키는 코드입니다.

// In videoClipDetails
template: '<div>clip details<div ng-transclude></div></div>',
transclude: 'true',
...
// in markup
<div video-clip-details> 
    <div file-library></div>
</div>
// in fileLibrary
require: '^videoClipDetails',

궁금한게 있으면 알려주세요!

언급URL : https://stackoverflow.com/questions/21342698/controller-required-by-directive-cant-be-found