Почему я не могу использовать внутреннюю директиву ng-show в AngularJS?

Question

Почему я не могу использовать внутреннюю директиву ng-show в AngularJS?

0

Я пытаюсь создать элемент, который отображает его содержимое при нажатии на него. Существует много способов сделать это. Я хочу сделать это внутри директивы. Почему это не работает?

http://plnkr.co/edit/Y13bcD7Ikuk6pERM9Mm8?p=preview

HTML:

<ez-option title="option 1">
        Option 1 inside
        <input ng-model="x">{{x}}
    </ez-option>
    <ez-option title="option 2">
        Option 2 inside
   </ez-option>

JavaScript:

directive('ezOption',function(){
    return {
        template:'<li></li><div ng-show=selected ng-transclude class=body></div>',
        link:function ($scope,iElement,iAttrs,controller,tanscludeFn){
            iElement.find('li').html(iAttrs.title)
            iElement.find('li').on('click',function(){
              $scope.selected=true
            })
        },
        scope:true,
        transclude:true
    }
})

Aminadav Glickshtein 22 июль 2015, в 02:45

Источник

Теги:

javascript

angularjs

2 ответа

2

Это связано с тем, что угловое значение не известно об изменении сферы действия вашего события click. Чтобы это стало известно, вы должны сделать это

            iElement.find('li').on('click',function(){
              $scope.$apply(function() {
                $scope.selected=true;
              })
            })

Кроме того, вы можете использовать угловой ng-click вместо

m.directive('ezOption',function(){
    return {
        template:'<li ng-click="selected=true"></li><div ng-show=selected ng-transclude class=body></div>',
        link:function ($scope,iElement,iAttrs,controller,tanscludeFn){
            iElement.find('li').html(iAttrs.title);
        },
        controller:function($scope){
          $scope.selected=false
        },
        transclude:true
    }
})

user2718281 21 июль 2015, в 22:53

Ещё вопросы

charlietfl · Accepted Answer · 2015-07-21T21-09-00.000Z

Так как ваше событие находится за пределами углового... это событие DOM, вам нужно рассказать об изменениях области, чтобы он мог запускать дайджест.

Используйте $scope.$apply(). Если вы используете основные директивы события, такие как ng-click это делается внутренне угловым.

   iElement.find('li').on('click',function(){
        $scope.selected=true;
        $scope.$apply();
    });

Таким образом, вы, как правило, лучше используете множество основных угловых директив событий, прежде чем прибегать к своим собственным

DEMO

нет .... вам нужно указать angular для запуска дайджеста, а это не то, для чего $ on