AngularJS: ng-click дочернего элемента директивы не работает

Question

Я установил plunker, чтобы продемонстрировать проблему. Щелчок кнопки «Боб» не работает. Я ожидал, что дочерние элементы элемента директивы будут иметь одинаковую изолированную область. Нужно ли переместить дочерние элементы в свойство шаблона директивы?

Answer 1

Я бы определил какой-либо объект pass. Настройка pass методом setDirectiveTitle и название:

Демо Plunker

JS

angular.module("myApp", []) 
    .directive("myScopedDirective", function() { 
    return { 
     scope: { 
     pass: '=', 
     preffix: "@msdTitle" 
     }, 
     link: function($scope, $element, $attributes) { 

     $scope.pass.setDirectiveTitle = function(title) { 
     $scope.pass.title = $scope.preffix + title; 
     } 
     } 
    }; 
    }) 
    .controller("AppController", ["$scope", function($scope) { 

    $scope.passVal = {}; 

    $scope.setAppTitle = function(title) { 
     $scope.passVal.title = title; 
    }; 
    }]); 

HTML

<div ng-controller="AppController"> 
     <h2>{{title}}</h2> 
     <button ng-click="setAppTitle('App 2.0')">Upgrade Me!</button> 
     <div my-scoped-directive pass="passVal" msd-title="I'm a directive inside the app: {{passVal.title}}"> 
     <h2>{{passVal.title}}</h2> 
     <button ng-click="passVal.setDirectiveTitle('Bob')" >Bob It!</button> 
     </div> 
    </div> 

Answer 2

Проблема в том, что она не скомпилирована, вам нужно использовать переход, чтобы скомпилировать html внутри директивы. http://plnkr.co/edit/hGKeTqqU62Na0MWPvBIZ?p=preview

Или вы можете просто передать шаблон: http://plnkr.co/edit/ZYhTdlwSDp0L3jjErOQt?p=preview

Но вы не можете использовать сферу атрибутов связывания в этом случае. Поскольку при втором обновлении родительской области третий клик по дочернему элементу не будет обновляться, как вы ожидали. Вы должны распространять данные по-разному.