angularjs с использованием функции видимости `ng-repeat`, которая не называется

Я вызываю метод из итератора ng-repeat. Но я не получаю метод, вызываемый в области. кто-нибудь поможет мне разобраться в этом?angularjs с использованием функции видимости `ng-repeat`, которая не называется

вот мои ЯШИ:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 

    $scope.levels = {'title':'Select a Level', item:["Low", "Medium", "Hight"], show:false }; 
    $scope.stages = ["Open", "Inprogress", "Closed"]; 
    $scope.colors = ["Red", "Yellow", "Blue"]; 

    $scope.levelHandler = function (level) { 
    console.log(level); //not called 
    } 

}); 


app.directive('dropDown', function() { 

    return { 

    replace:true, 
    scope :{ 
     data:"=" 
    }, 
    template : $('#dropdown').html(), 
    link:function (scope, element, attrs) { 

     var title = element.find('.title'); 
     var listHolder = element.find('ul'); 
     var parent = title.add(listHolder); 
     var list = element.find('li'); 

     title.on('click', function (e) { 
     scope.data.show = !scope.data.show; 
     scope.$apply(); 

     }); 

     parent.add(listHolder).on('mouseleave', function (e) { 
     scope.data.show = !scope.data.show; 
     scope.$apply(); 
     }); 


    } 

    } 

})

HTML:

<body ng-controller="MainCtrl"> 
    <form name="myform"> 

     <drop-down data="levels" ></drop-down> 

    </form> 
    <script type="text/ng-template" id="dropdown"> 

    <div class="formGroup"> 
     <h4 class="title">{{data.title}}</h4> 
     <ul ng-show='data.show'> 
      <li ng-repeat="level in data.item" ng-click="levelHandler(level)" >{{level}}</li> 
     </ul> 
     </div> 

    </script> 
    </body>

Live Demo

источник

2016-01-26 3gwebtrain

Ваша директива может быть выполнена без jQuery. См. [Этот PLUNKER] (http://plnkr.co/edit/9iA0Mfl57Bt5cFKg8E62?p=preview). – georgeawg

ваша директива имеет изолированный объем, поэтому вам необходимо связать внешнюю функцию от контроллера в директиве, и он будет работать, как ожидалось.

вот работаю plnkr

scope :{ 
    data:"=", 
    func: '=' 
}

шаблон:

<drop-down func='levelHandler' data="levels" ></drop-down> 
.. 
<li ng-repeat="level in data.item" ng-click="func(level)" >{{level}}</li>

здесь хороший tutorial что объясняет директиву прицела

источник

2016-01-26 09:40:42

, а также я использую количество 'scope. $ Apply();' для каждого из eavents. есть ли способ минимизировать это? – 3gwebtrain

Вы изолированная сфера внутри директивы, так что вы можете не только см. значения в области вне. То, что вы, вероятно, хотите здесь, чтобы передать функции levelHandler в dfirective:

app.directive('dropDown', function() { 

    return { 

    replace:true, 
    scope :{ 
     data:"=", 
     levelHandler: "=" 
    }, 
    template : $('#dropdown').html(), 
    link:function (scope, element, attrs) { 
... 
})

, а затем в вашем HTML:

<drop-down data="levels" level-handler="levelHandler" ></drop-down>

альтернативой было бы не использовать изолированную сферу на всех, но только доступ данные через attrs.data. Это имеет тот недостаток, что если это выражение, вы должны оценить его сами, но иногда это может быть предпочтительнее.

BTW, обычно лучше использовать ng-click и ng-mouseleave в шаблоне, а не привязывать события. Таким образом вам не придется беспокоиться о том, чтобы позвонить scope.$apply() для себя.

источник

2016-01-26 09:46:37 Duncan

Я согласен, я собираюсь использовать drop.s, чтобы сэкономить время, я пытаюсь «директива», если у вас есть лучший способ повторного использования компонентного подхода, дайте мне знать. – 3gwebtrain

angularjs с использованием функции видимости `ng-repeat`, которая не называется

ответ

Смежные вопросы