Изменение области действия в обработчике событий в Угловой директиве

Question

Мне нужно динамически изменять некоторые переменные сферы после того, как песня в звуковом теге закончена. Моя проблема заключается в том, что в переменной scope.test не влияет звуковая директива.

angular.module('playItApp', []) 

    .controller('audioController', ['$scope', function($scope){ 
     $scope.test = 'songNotFinished'; 
    }) 

    .directive('audio', function(){ 
     return { 
      restrict: 'E', 
      link: function(scope, element, attrs){ 
       element[0].onended = function() { 
        scope.test = 'songFinished'; 
        this.load(); 
       }; 
      } 
     } 
    }); 


<div ng-controller="audioController"> 
    <h1>{{ test }}</h1> 
    <audio controls autoplay> 
     <source ng-src="{{ some_path }}" type="audio/mpeg"> 
    </audio> 
</div> 

Answer 1

Вам просто нужно сказать директиву, которая входит в объем потребностей двухстороннее связывание. Это означает, что связывается с вашей родительской области, а также сообщать обратно к контроллеру, что-то в области видимости изменилось с scope.$apply(function() { /* what's changing */ });

.directive('audio', function(){ 
    return { 
     restrict: 'E', 

     scope: { 
      'test' : '=' // Two-way binding <-- 

      // There are three options here when you're dealing with scope 
      // @ --> Attribute string binding 
      // & --> Callback method binding 
      // = --> Two-way model binding 
     }, 

     link: function(scope, element, attrs){ 
      element[0].onended = function() { 

       // Make sure to call an anonymous function inside of .$apply 
       scope.$apply(function() { 
        scope.test = 'songFinished'; 
       }); 

       this.load(); 
      }; 
     } 
    } 
});