Mẫu góc không hiển thị với ng-hide

Question

Tôi có chỉ thị góc mà tôi đang sử dụng để đặt biểu mẫu nút. Mẫu được ẩn cho đến khi người dùng cần xem nó. Đó là một mẫu đơn giản hoạt động độc lập, nhưng khi tôi kết hợp nó thành dạng lớn hơn, mẫu không xuất hiện.

Đây là chỉ thị:

.directive('buttonToggle', function() { 
       return { 
        restrict: 'A', 
        scope: { 
         myBtnArr: "=" 
        }, 
        template: '<button ng-click="click()">{{ myBtnTxt[myBtnArr] }}</button>', 
        link: function(scope) { 
         scope.myBtnTxt = ["AND", "OR", "NOT"]; 
         scope.click = function() { 
          scope.myBtnArr = (scope.myBtnArr < 2 ? scope.myBtnArr + 1 : 0); 
         } 
        } 
       }; 
      }); 

Sau đó html hoạt động:

<div button-toggle my-btn-arr=0></div> 

Và đoạn mã html mà không hoạt động:

<tr ng-show="rowsShown >= 2"><td>Search by:</td><td><div button-toggle my-btn-arr=0></div><select ng-model="selection2" ng-options="option.text for option in options"></select><input type="text" size="20" ng-model="queryF2"><ng-md-icon icon="add_circle_outline" style="fill:#a9a9a9" ng-click="addSearchField();"></ng-md-icon> <ng-md-icon icon="remove_circle_outline" style="fill:#a9a9a9" ng-click="removeSearchField();"></ng-md-icon></td></tr> 

Khi tôi chạy này html trong phần lớn hơn (được điều khiển bởi một bộ điều khiển không liên quan đến mẫu) Tôi nhận được lỗi này:

Error: [$compile:nonassign] Expression '0' used with directive 'buttonToggle' is non-assignable! 

Vì vậy, chỉ cần bọc hàm mẫu đó trong phạm vi. $ Apply phải không? Không. Khi tôi làm điều đó ...

link: function(scope) { 
      scope.myBtnTxt = ["AND", "OR", "NOT"]; 
      scope.click = function() { 
       scope.$apply (function() { 
        scope.myBtnArr = (scope.myBtnArr < 2 ? scope.myBtnArr + 1 : 0); 
       }) 
      } 
     } 

tôi nhận được lỗi này:

Error: [$rootScope:inprog] $apply already in progress 

Vì vậy, nó rõ ràng là một vấn đề với sai gói phạm vi, nhưng không chắc chắn làm thế nào để sửa chữa nó. Có suy nghĩ gì không?

Answer 1

Dường như bạn không muốn tạo ra một hai cách ràng buộc cho my-btn-arr . Nếu bạn chỉ muốn chuyển dữ liệu đến chỉ thị thay vì liên kết với biến hiện tại, hãy đọc từ đối số thuộc tính của link.

.directive('buttonToggle', function() { 
    return { 
     restrict: 'A', 
     scope: {}, 
     template: '<button ng-click="click()">{{ myBtnTxt[myBtnArr] }</button>', 
     link: function(scope, elem, attr) { 
     scope.myBtnArr = attr.myBtnArr; 
     scope.myBtnTxt = ["AND", "OR", "NOT"]; 
     scope.click = function() { 
      scope.myBtnArr = (scope.myBtnArr < 2 ? scope.myBtnArr + 1 : 0); 
     } 
     } 
    } 
    }); 

Nếu bạn cũng muốn có khả năng chuyển biến sử dụng đầu vào $parse.

// This won't work with an isolated scope, inherit from parent scope instead 
scope : true, 
link: function(scope, elem, attr) { 
    // this will evaluate the expression against the scope 
    scope.myBtnArr = $parse(attr.myBtnArr)(scope); 
} 

Bây giờ bạn có thể sử dụng các chỉ thị như

<div button-toggle my-btn-arr="0"></div> 
<div button-toggle my-btn-arr="view.myValue"></div> 

Nếu bạn thực sự muốn sử dụng một cách hai ràng buộc, nó phải có khả năng viết các giá trị trở lại vào con đường được xác định với các biểu hiện my-btn-arr.Vì vậy, nếu bạn sử dụng scope: { myBtnArr: "=" } bạn phải sử dụng các chỉ thị với một biểu thức có thể ghi như thế này:

<div button-toggle my-btn-arr="view.myValue"></div> 
<!-- "0" is not assignable--> 
<div button-toggle my-btn-arr="0"></div> 

Ví dụ: http://jsfiddle.net/Lw7ckt9x/1/

Answer 2

Thay vì sử dụng chức năng liên kết, hãy thử làm điều tương tự trong chức năng điều khiển. Chức năng liên kết là bắt buộc khi bạn thực hiện bất kỳ thao tác DOM nào đối với chức năng mà bạn yêu cầu bộ điều khiển phải đủ.

Answer 3

Nhìn vào lỗi này trên ngdocs.

Bạn sử dụng này:

<div button-toggle my-btn-arr=0></div> 

nhưng 0 không thể chuyển nhượng. Có nghĩa là bạn không thể làm 0 = 1;

Bạn phải vượt qua một biến với giá trị của 0 thay vì đơn giản 0 Như thế này:

<div button-toggle my-btn-arr="obj.myvar"></div>