Как вызвать функцию родительской области видимости в директиве

Question

Я хочу вызвать функцию контроллера в шаблоне директивы. Это не работает:

Контроллер:

myApp.controller('StartController', ['$scope', '$location', function ($scope, $location) { 

    $scope.changeLocation = function (path) { 
     $location.path(path); 
    } 
}]); 

index.html:

<div start-directive changelocation="changeLocation"> 
</div> 

директива:

myApp.directive('startDirective', function ($templateRequest, $compile) { 
    return { 
     restrict: 'AE', 
     transclude: true, 
     link: function (scope, element, attrs) { 
      var baseSiteUrlPath = $("base").first().attr("href"); 
      $templateRequest(baseSiteUrlPath + '/App/Templates/uxStart.html').then(function (html){ 
       var template = angular.element(html); 
       element.append(template); 
       $compile(template); 
      }); 

     } 
    }; 
}); 

и uxStart.html

<div class="box1 square1"> 
    <button class="indexBtn" ng-click="$parent.changeLocation('/index')">Fahrplan & Buchung</button> 
</div> 

<div class="box2 square2"> 
    <button class="serviceBtn" ng-click="changeLocation('/pageNotFound')">Services</button> 
</div> 

Что я делаю неправильно?

ТНХ заранее

Answer 1

Вы не компилируется ваш элемент с областью, вы только создать функцию компиляции этого шаблона, как $compile(template), который не будет компилировать этот элемент. Вам нужно вызвать функцию компиляции, передав в нее параметр scope.

Как ваша директива использует общую область видимости, тогда вам не нужно указывать $parent перед вызовом метода.

Директива

myApp.directive('startDirective', function($templateRequest, $compile) { 
    return { 
    restrict: 'AE', 
    transclude: true, 
    link: function(scope, element, attrs) { 
     var baseSiteUrlPath = $("base").first().attr("href"); 
     $templateRequest(baseSiteUrlPath + '/App/Templates/uxStart.html').then(function(html) { 
     var template = angular.element(html); 
     element.append(template); 
     var linkFn = $compile(template); 
     //compile it with scope to generated compiled DOM with scope 
     linkFn(scope); //linking scope with template 
     }); 

    } 
    }; 
});