Chỉ thị AngularJs: phương thức gọi từ phạm vi cha mẹ trong mẫu

Question

Tôi khá mới đối với các chỉ thị Góc và tôi gặp rất nhiều khó khăn khi thực hiện điều này để làm những gì tôi muốn. Dưới đây là những điều cơ bản về những gì tôi có:

Bộ điều khiển:

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

Chỉ thị:

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

Template (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> 

Nếu không rõ, tôi muốn thẻ <edit-button> chứa 3 nút khác nhau, mỗi nút tương tác với bất kỳ thuộc tính phạm vi nào được chuyển vào ng-edit. Khi được nhấp, họ nên thay đổi thuộc tính đó rồi gọi phương thức phạm vi thích hợp.

Hiện tại, việc nhấp vào các nút chính xác sẽ thay đổi giá trị của $scope.editing, nhưng các phương pháp updateProfile và cancelProfile không hoạt động. Tôi có thể là cách dựa trên cách sử dụng chỉ thị đúng cách, nhưng tôi gặp khó khăn khi tìm kiếm một ví dụ trực tuyến để giúp tôi hoàn thành những gì tôi đang cố gắng làm. Bất kỳ trợ giúp sẽ được đánh giá cao.

Answer 1

Một cách là gọi các hàm bằng cách sử dụng $parent.

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

Demo

Một cách khác (và có lẽ là cách tốt hơn), là cấu hình phạm vi riêng biệt của chỉ thị của bạn để chứa tài liệu tham khảo cho những chức năng điều khiển:

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

Sau đó, bạn vượt qua các chức năng trong qua HTML:

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

Demo