AngularJS: вызов функции контроллера из моей директивы - PullRequest
Новая
       0

AngularJS: вызов функции контроллера из моей директивы

0 голосов
/ 10 апреля 2020

Я пытаюсь вызвать функцию контроллера из моей директивы, но она постоянно повторяла: «моя функция не определена». Я не знаком с директивой angularJs. Я пытался использовать link: function в моей директиве, но я действительно не могу понять это. Пожалуйста, помогите .. спасибо: -)

html: 

<body ng-app="myApp">
    <div ng-controller="myCtrl">
      <button class="btn" ng-click="changeDataObj()">Change Data Object</button>
      <div my-Tree list="list" >

      </div>            
    </div>
  </body>

js: 

angular.module('myApp', [])
    .controller('myCtrl', myCtrl)
    .directive('myTree', ['$compile', myTree]);

function myCtrl($timeout, $scope) {        
    $scope.reset = true;
    $scope.list = [
        {
            name: 'Laptop',
            children: [
                {
                    name: 'Apple',
                    children: [
                        { name: 'Macbook Air' },
                        { name: 'Macbook Pro' }
                    ]
                },
                {
                    name: 'Microsoft',
                    children: [
                        { name: 'Surface Pro' }
                    ]
                }
            ]
        },
        {
            name: 'Desktop',
            children: [
                { name: 'Dell' }
            ]
        }
    ];

    $scope.selectANode = function (name) {
        alert(name);
    }       
}

function myTree($compile) {
    return {
        restrict: 'EA',
        scope: {
            list: '='
        },
        compile: function (tElem) {
            return {
                post: function (scope, iElem, iAttrs) {

                    var htmlString = [''];

                    addChildren(htmlString, scope.list, true);

                    function addChildren(htmlString, array, first) {    
                        if (!angular.isArray(array)) return;

                        if (first) { // root level parent must always be display:block
                            htmlString[0] += '<ul>';
                        } else {
                            htmlString[0] += '<ul style="display:none;">';
                        }

                        for (var i = 0; i < array.length; i++) {
                            htmlString[0] += '<li><span ng-click="selectANode(\'' + array[i].name + '\')">' + array[i].name + '</span><i class="navFinder__toggleBtn fa fa-folder-o"></i>';
                            addChildren(htmlString, array[i].children);
                            htmlString[0] += '</li>';
                        }
                        htmlString[0] += '</ul>';
                    }

                    var compiledContents = $compile(htmlString[0]);
                    compiledContents(scope, function (clone) {
                        iElem.append(clone);
                    })

                    iElem.find('i').on('click', function (event) {
                        event.target.className = (event.target.className == 'fa fa-folder-open-o navFinder__toggleBtn') ? 'fa fa-folder-o navFinder__toggleBtn' : 'fa fa-folder-open-o navFinder__toggleBtn'; // change icon
                        event.target.nextSibling.style.display = (event.target.nextSibling.style.display == 'none') ? 'block' : 'none'; // expand and collapse
                    });    
                }
            };
        }
    };
}

1 Ответ

1 голос
/ 10 апреля 2020

Ваш метод на ng-click должен остаться в compile->post

 scope.selectANode = function (name) {
        alert(name);
 }

Плункер 1

Но если вы Чтобы вызвать метод контроллера, вам нужно добавить дополнительный код для его привязки: 

 scope: {
            list: '=',
            selectNode: '&'
        },

// ...
scope.selectANode = function (name) {
    scope.selectNode({data: name});
}

и ваш HTML: 

<div my-Tree list="list" select-node="selectANode(data)">

Plunker 2

Наслаждайтесь:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...