2015-05-19 6 views
1

Я пытаюсь разработать директиву, в которой у меня должна быть кнопка clickable, щелчок запускает функцию контроллера.ng-click не работает внутри директивы

Вот мой код

'use strict'; 

/*global d3:false */ 

angular.module('myApp').directive('legends', function() { 
return { 
    restrict: 'E', 
    scope: { 
    service: '=', 
    buttonClick : '&' 
    }, 
    replace: true, 

    link: function(scope, element, attrs) { 

    function main(data) { 
     var format = d3.time.format('%d %b %y'), 
     str = '<div>'+ 
     '<div>'+ 
     '<span>A</span>'+ 
     '<span>' + format(data[0]) + '</span>'+ 
     '<span>'+ data[1].toFixed(2) +'</span></div>'+ 
     '<div>'+ 
     '<span ng-click="buttonClick()"></span>'+ 
     '</div>'+ 
     '<div>'+ 
     '<span>B</span>'+ 
     '<span>' + format(data[2]) + '</span>'+ 
     '<span>'+ data[3].toFixed(2) +'</span></div></div>'; 
     element.html(str); 
    } 

    //********************************************************************* 
    scope.$watchCollection('service', function(data) { 
     if (!angular.isUndefined(data) && data.length === 4) { 
     main(data); 

     }   
    }); 
    } 

}; 

});

Я прочитал в другом посте, что мне нужно передать ссылку функции как атрибут, это то, что я сделал, но все же ничего не запускается.

Ctrl:

angular.module('myApp') 
.controller('ctrl', 
    function() { 
     $scope.switchObjects = function() { 
      console.log('done'); 
     } 
    } 
); 

Спасибо всем :)

ответ

0

я могу что-то упустить, но в вашей директиве ваша функция называется buttonClick() и в контроллере switchObjects.

+0

Да ButtonClick это атрибут, который принимает switchObjects ссылку для того, чтобы вызвать функцию контроллера с помощью ButtonClick() – Dgn

0

Вам необходимо скомпилировать вашу строку HTML, прежде чем вводить ее в элемент.

Делают это, как это вместо:

.directive('myCustomer', function() { 

    function postlink(scope, elem, attrs) { 
     scope.buttonClick = function() { 
      console.log("Button clicked"); 
     } 
    } 

    return { 
    link: postlink, 
    template: '<html>PUT HTML HERE</html>' 
    }; 
}); 
Смежные вопросы