如何在AngularJS正确使用指令 [英] How to use directive properly in AngularJS

问题描述

我做我的第一个步骤，在AngularJS指令和这个指令是不是为我工作。

我有一个 NG-重复列表

 ＆LT; UL NG-后列表的滤光器＆gt;
    ＆LT;李NG重复=中的项项|过滤器：activeFilter.filterType = activeFilter.filterValue＆GT; ...＆LT; /李＆GT;
＆LT; / UL＆GT;
 

这正在筛选与 $ scope.activeFilter.filterValue

我试图创建 NG-后列表过滤器指令，以便名单已被过滤，所以我可以作出新的一个DOM操作后，它会执行 UL 元素。

这是我的指令，不工作：

  myModule.directive（'ngAfterListFilter'，函数（）{
    返回{
        限制：'A'，
        链接：功能（范围，元素，ATTRS）{
            范围。$腕表（scope.activeFilter.filterValue，功能（VAL）{
                的console.log（'做的东西在这里'）;
            }）;
        }
    }
}）;
 

1. 我如何使它工作我认为scope.activeFilter.filterValue没有被更新，但 - 它是在范围内，它并得到更新和列表获取过滤。我试图看这个变量，因此为什么不工作？




2. 有没有更好的方式来创建这个指令我的意思是 - 我想运行一个DOM变化的时候，名单得到更新（调整的事情大小）。所以有听 $（'UL'）的一种方式。HTML（）？我试过，但我输了，我把原始文本在JavaScript错误

解决方案

$最后可以被用来确定最后＆下时;在创建LI>。请参见这个小提琴（我没有写）的checkLast指令的实现，你可以连接到您的＆LT ; LI>元素：

 指令（'checkLast'，函数（）{
  返回功能（范围，元素，ATTRS）{
     如果（$范围。最后===真）{
        element.ready（函数（）{
           //操纵UL在这里，如果不工作
           //尝试用$超时：
           // $超时（函数（）{
           //做MANIP这里
           //}，0，FALSE）; //删除假如果您需要$适用于运行
 

另请参阅 http://stackoverflow.com/a/13906907/215945

我不知道如果element.ready（）是必要的，或者如果它适用于动态生成的元素。

I am doing my first steps with directives on AngularJS and this directive is not working for me.

I have an ng-repeat list

<ul ng-after-list-filter>
    <li ng-repeat="item in items | filter:activeFilter.filterType = activeFilter.filterValue">...</li>
</ul>

that is being filtered with $scope.activeFilter.filterValue

I am trying to create the ng-after-list-filter directive so it will execute after the list has been filtered so I can make a dom manipulation on that new ul element.

This is my directive that is not working:

myModule.directive('ngAfterListFilter',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs) {
            scope.$watch(scope.activeFilter.filterValue, function(val) {
                console.log('do something here');
            });
        }
    }
});

1. How do I make it work? I assume that scope.activeFilter.filterValue is not being updated, but - it is in the scope, and it does get updated and the list gets filtered. and I am trying to watch on this variable so why isn't it working?

2. Is there a better way to create this directive? I mean - I want to run a DOM changes when the list get updated (adjust sizes of things). so is there a way to listen to the $('ul').html()? I tried that but it outputs me an error that I put raw text in javascript

解决方案

$last can be used to determine when the last <li> is being created. See this fiddle (I didn't write it) for an implementation of a checkLast directive that you can attach to your <li> element:

directive('checkLast', function () {
  return function (scope, element, attrs) {
     if (scope.$last === true) {
        element.ready(function () {
           // manipulate ul here, or if that doesn't work
           // try with $timeout:
           // $timeout(function() { 
           //    do manip here
           //}, 0, false);  // remove false if you need $apply to run

See also http://stackoverflow.com/a/13906907/215945

I'm not sure if element.ready() is necessary, or if it works on dynamically generated elements.

这篇关于如何在AngularJS正确使用指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！