Chức năng gọi trên phạm vi phụ huynh chỉ thị với đối số phạm vi chỉ thị

Question

Tôi đang phát triển một chỉ thị hiển thị và ẩn nội dung của nó dựa trên sự kiện nhấp (ng-click) được xác định trong mẫu của nó. Trên một số quan điểm mà chỉ thị được sử dụng, tôi muốn có thể biết nếu chỉ thị hiện đang hiển thị hoặc ẩn nội dung của nó để tôi có thể trả lời các thay đổi DOM. Chỉ thị có phạm vi phân lập và tôi đang cố gắng thông báo cho phạm vi phụ huynh khi chỉ thị đã được "chuyển đổi". Tôi đang cố gắng thực hiện điều này bằng cách chuyển một hàm gọi lại đến chỉ thị nơi nó được sử dụng có thể được gọi khi trạng thái của chỉ thị thay đổi tức là ẩn hoặc hiển thị

Tôi không chắc chắn cách thực hiện chính xác trạng thái này của chỉ thị (ẩn hoặc hiển thị) được lưu trữ trong phạm vi cô lập của chỉ thị và được xác định sau khi nhấp chuột ng. Vì vậy, tôi cần gọi hàm của phạm vi cha mẹ từ bên trong chỉ thị và không phải từ việc thực hiện chế độ xem.

Điều này sẽ làm cho WAAY có ý nghĩa hơn với ví dụ. Dưới đây là một plunked chứng minh những gì tôi muốn làm:

http://plnkr.co/edit/hHwwxjssOKiphTSO1VIS?p=info

var app = angular.module('main-module',[]) 

app.controller('MainController', function($scope){ 
    $scope.myValue = 'test value'; 
    $scope.parentToggle = function(value){ 
    $scope.myValue = value; 
    }; 
}); 

app.directive('toggle', function(){ 
    return { 
      restrict: 'A', 
      template: '<a ng-click="toggle();">Click Me</a>', 
      replace: true, 
      scope: { 
       OnToggle: '&' 
      }, 
      link: function($scope, elem, attrs, controller) { 
       $scope.toggleValue = false; 
       $scope.toggle = function() { 
        $scope.toggleValue = !$scope.toggleValue; 
        $scope.OnToggle($scope.toggleValue) 
       }; 
      } 
     }; 
}); 

Tôi tương đối mới để kiễu góc. Đây có phải là một ý tưởng tồi để bắt đầu? Tôi có nên sử dụng một dịch vụ hoặc một thứ gì đó thay vì chuyển qua các hàm refs không?

Cảm ơn!

Answer 1

Cập nhật

Bạn cũng có thể sử dụng & để ràng buộc các chức năng của phạm vi root (mà thực sự là mục đích của &).

Để làm như vậy chỉ thị cần phải được một chút thay đổi:

app.directive('toggle', function(){ 
    return { 
    restrict: 'A', 
    template: '<a ng-click="f()">Click Me</a>', 
    replace: true, 
    scope: { 
     toggle: '&' 
    }, 
    controller: function($scope) { 
     $scope.toggleValue = false; 
     $scope.f = function() { 
     $scope.toggleValue = !$scope.toggleValue; 
     $scope.toggle({message: $scope.toggleValue}); 
     }; 
    } 
    }; 
}); 

Bạn có thể sử dụng như thế này:

<div toggle="parentToggle(message)"></div> 

Plunk

---

Bạn có thể liên kết các chức năng sử dụng = . Ngoài ra, hãy đảm bảo tên thuộc tính trong phạm vi và thẻ của bạn phù hợp (AngularJS dịch CamelCase thành ký hiệu gạch ngang ).

Trước:

scope: { 
    OnToggle: '&' 
} 

Sau:

scope: { 
    onToggle: '=' 
} 

Bên cạnh đó không sử dụng on-toggle="parentToggle({value: toggleValue})" trong mẫu chính của bạn. Bạn không muốn gọi hàm nhưng chỉ cần chuyển một con trỏ của chỉ thị.

Plunk