AngularJs yönergesi: şablon içinde üst kapsamdan çağrı yöntemi

Question

Angular direktifleri konusunda oldukça yeniyim ve bunu istediğimi yapmak için çok fazla sorun yaşıyorum. İşte ne var temelleri var:

Denetleyici:

controller('profileCtrl', function($scope) { 
    $scope.editing = { 
    'section1': false, 
    'section2': false 
    } 
    $scope.updateProfile = function() {}; 
    $scope.cancelProfile = function() {}; 
}); 

Yönergesi:

directive('editButton', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'editbutton.tpl.html', 
    scope: { 
     editModel: '=ngEdit' 
    } 
    }; 
}); 

Şablon (editbutton.tpl.html):

<button 
    ng-show="!editModel" 
    ng-click="editModel=true"></button> 
<button 
    ng-show="editModel" 
    ng-click="updateProfile(); editModel=false"></button> 
<button 
    ng-show="editModel" 
    ng-click="cancelProfile(); editModel=false"></button> 

HTML:

<edit-button ng-edit="editing.section1"></edit-button> 

Açık değilse, <edit-button> etiketinin, her biri kapsam özelliği ng-edit'a iletilen üç farklı düğmeyle içerilmesini istiyorum. Tıklandığında, bu özelliği değiştirmeli ve uygun kapsam yöntemini çağırmalıdırlar.

Şimdi olduğu gibi, düğmelerin doğru tıklatılması $scope.editing değerini değiştirir, ancak updateProfile ve cancelProfile yöntemleri işe yaramıyor. Yönergelerin doğru bir şekilde nasıl kullanılacağına dair temel bir yol olabilir, ancak yapmaya çalıştığım şeyi gerçekleştirmeme yardımcı olması için çevrimiçi bir örnek bulmakta zorlanıyorum. Herhangi bir yardım takdir edilecektir.

Answer 1

$parent'u kullanarak işlevleri çağırmanın bir yolu olacaktır. Sonra

app.directive('editButton', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'editbutton.tpl.html', 
    scope: { 
     editModel: '=ngEdit', 
     updateProfile: '&', 
     cancelProfile: '&' 
    } 
    }; 
}); 

içeri işlevleri geçmesi:

<button ng-show="editModel" ng-click="$parent.cancelProfile(); editModel=false">b3</button> 

Demo

bir başka yolu (ve muhtemelen daha iyi bir şekilde), bu kontrolör işlev başvurularını içerecek biçimde yönerge izole kapsamını yapılandırmaktır aracılığıyla HTML:

<edit-button ng-edit="editing.section1" update-profile='updateProfile()' cancel-profile='cancelProfile()'></edit-button> 

Demo