Açısal Şablon ng-hide ile gösterilmiyor

Question

Düğme formu yerleştirmek için kullanacağım bir açısal yönergeye sahibim. Şablon, kullanıcının onu görmesi gerekene kadar gizlenir. Kendi başına çalışan basit bir şablon, ancak daha büyük bir formda birleştirdiğimde şablon görünmez.

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

Sonra çalışır html:

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

Ve html parçacığı çalışmaz:

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

ben bu çalıştırdığınızda İşte

direktifi olduğunu Daha büyük kısmi html (şablonla ilgisi olmayan bir denetleyici tarafından kontrol edilir) Bu hatayı alıyorum:

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

Sadece bu şablon işlevini kapsamda sarın. Hayır! Ben

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

bu hatayı alıyorum ... bunu yaparken:

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

Yani açıkçası yanlış kapsamını sarma ile bir sorun, ama bunu düzeltmek için ne kadar emin değildi. Düşüncesi olan var mı?

Answer 1

Size my-btn-arr için bağlayıcı bir iki yol oluşturmak istemiyoruz benziyor . Mevcut bir değişkeni bağlamak yerine yalnızca yönerge veri aktarmak istiyorsanız, link öznitelik argümanından okuyun.

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

da ihtimal girdi kullanımı $parse gibi bir değişken geçirmek istiyorsanız. Eğer gerçekten iki yönlü bağlama kullanmak isterseniz

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

Şimdi

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

olarak direktifini kullanabilirsiniz, geri ifadesi my-btn-arr ile tanımlanan yol değerleri yazma mümkün olmalıdır.Kullanmak Yani, scope: { myBtnArr: "=" } Böyle bir yazılabilir ifade ile direktifini kullanmak zorunda:

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

Örnekler: http://jsfiddle.net/Lw7ckt9x/1/

Answer 2

Bağlantı işlevini kullanmak yerine, aynı işlevi denetleyici işlevi altında yapmayı deneyin. Kontrol fonksiyonunun yeterli olması için işlevsellik için herhangi bir DOM manipülasyonu yaptığınızda link fonksiyonu gereklidir.

Answer 3

Bu hataya şu ngdocs'dan bakın.

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

ama 0 devredilemez:

Bunu kullanın. Eğer bu gibi düz 0 yerine 0 değeriyle bir değişken geçmek zorunda 0 = 1;

yapamaz Anlamı:

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