Угловые директивы (ngclick not firing)

Question

Я новичок в Angular, и я работал над небольшим проектом. У меня вопрос о директивах и ng-click.

Каждый раз, когда я нажимаю на тег div для установки функции setlock(), он никогда не срабатывает. Может ли это быть вызвано тем, что моя директива и контроллер находятся в отдельных файлах? И есть ли способ сделать эту работу, используя ссылку:?

Спасибо.

Directive.js

(function(){ 
'use strict'; 

angular 
    .module('widget.ballslot') 
    .directive('ballSlot', ballSlot); 

function ballSlot(){ 

    var directive = { 
     restrict: 'E', 
     scope: true, 
     templateUrl: 'app/widgets/ballslot.html', 
     controller: 'Ballslot', 
    } 
    return directive; 
} 
})(); 

Controller.js

(function(){ 
'use strict'; 

angular 
    .module('widget.ballslot') 
    .controller('Ballslot', Ballslot); 

function Ballslot() { 
    var vm = this; 

    vm.locked = true; 

    function setlock() { 
     vm.locked = !vm.locked; 
    }; 

}; 
})(); 

page.html

<div data-ng-controller='Ballslot as vm' class='ball'> 
<div id='background-purple' ng-click='vm.setlock()'> 
    <i class="fa fa-lock" ng-hide="vm.locked"> </i> 
    <i class="fa fa-unlock-alt" ng-show="vm.locked"></i>  
</div> 
</div> 

Answer 1

Looks как функция setLock не доступна для HTML. Это потому, что это частная функция, а не через vm.

Попробуйте изменить

function setlock() { 
    vm.locked = !vm.locked; 
}; 

К

vm.setlock = function() { 
    vm.locked = !vm.locked; 
};