Szablon kątowy nie jest wyświetlany z ng-hide

Question

Mam dyrektywę kątową, której używam do umieszczania formularza przycisku. Szablon jest ukryty, dopóki użytkownik go nie zobaczy. Jest to prosty szablon, który działa samodzielnie, ale gdy go połączę w większą formę, szablon się nie pojawi.

Oto dyrektywy:

.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); 
         } 
        } 
       }; 
      }); 

Następnie html, który działa:

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

I urywek html że nie działa:

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

Kiedy uruchomić ten html w większym częściowym (który jest kontrolowany przez kontroler niezwiązany z szablonem) Otrzymuję ten błąd:

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

Po prostu zapakuj tę funkcję szablonu w zakresie. $ Apply right? Nie. Kiedy to zrobić ...

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

otrzymuję ten błąd:

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

Więc jest to oczywiście problem z nieprawidłowo owijania zakresu, ale nie wiem jak to naprawić. jakieś pomysły?

Answer 1

Wygląda na to, że nie chcesz, aby utworzyć dwie sposób wiążący dla my-btn-arr . Jeśli chcesz tylko przekazać dane do dyrektywy zamiast powiązać istniejącą zmienną, przeczytaj z argumentu atrybutu 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); 
     } 
     } 
    } 
    }); 

Jeśli chcesz również przekazać zmienną jako dane wejściowe, użyj $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); 
} 

Teraz można użyć dyrektywy jako

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

Jeśli naprawdę chcesz użyć dwukierunkowy wiążące, musi istnieć możliwość zapisu wartości z powrotem do ścieżki zdefiniowanej z wyrażeniem my-btn-arr.Tak więc, jeśli używasz scope: { myBtnArr: "=" } trzeba użyć dyrektywy z zapisywalny wypowiedzi jak ta:

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

Przykłady: http://jsfiddle.net/Lw7ckt9x/1/

Answer 2

Zamiast korzystać z funkcji łącza, spróbuj zrobić to samo pod funkcją kontrolera. Funkcja łącza jest wymagana, gdy wykonujesz dowolną manipulację DOM, aby uzyskać wymaganą funkcjonalność.

Answer 3

Sprawdź ten błąd na ngdocs.

użyć tego:

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

ale 0 nie jest przypisane. Co oznacza, że ​​nie może zrobić 0 = 1;

Trzeba przekazać zmienną z wartością 0 zamiast zwykłego 0 tak:

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