Angular --- 自定义指令更新_angular 指令绑定的数据更新-优快云博客

本文链接：https://blog.youkuaiyun.com/flower46273736/article/details/53442809

本文介绍如何使用 AngularJS 的自定义指令实现左滑删除功能、基于 ng-click 和 jQuery 的 slideToggle() 效果，以及如何观察 DOM 变化并响应。同时探讨了多维数组在 ng-repeat 中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.左滑删除

<li ng-repeat="name in names" drag-to-dismiss="deleteTodo($index)" >			
	……					
</li>	

app.directive('dragToDismiss', function($drag, $parse, $timeout) {
  return {
    restrict: 'A',
    compile: function(elem, attrs) {
      var dismissFn = $parse(attrs.dragToDismiss);
      return function(scope, elem) {
        var dismiss = false;

        $drag.bind(elem, {
          transform: $drag.TRANSLATE_LEFT,
          move: function(drag) {
            if ( Math.abs(drag.distanceX) >= drag.rect.width / 4) {
              dismiss = true;
              elem.addClass('dismiss');
            } else {
              dismiss = false;
              elem.removeClass('dismiss');
            }
          },
          cancel: function() {
            elem.removeClass('dismiss');
          },
          end: function(drag) {
            if (dismiss) {
              elem.addClass('dismitted');
              $timeout(function() {
                scope.$apply(function() {
                  dismissFn(scope);
                });
              }, 300);
            } else {
              drag.reset();
            }
          }
        });
      };
    }
  };
});

2.Jquery slideToggle()指令

<div ng-controller="slideController">
    <li ng-repeat-start="todo in todos" ng-click="$index=!$index">{{todo.name}}</li>
    <li ng-repeat-end slide-toggle="$index">{{$index}}</li>
</div>

//控制器
app.controller('slideController', function ($scope) {
	$scope.todos=[{name:'1'},{name:'2'},{name:'3'},{name:'4'}]
});

//指令
app.directive('slideToggle', function() {
	return {
		restrict: 'A',
		scope:{
			isOpen: "=slideToggle"
		},
		link: function(scope, element, attr) {
			scope.$watch('isOpen', function(newVal,oldVal){
				if(newVal !== oldVal){
					element.stop().slideToggle('slow');
				}
			});
		}
	};
});

3.$watch DOM（第二次click不执行）

<input ng-model="editArea"/>

$scope.Rewrite = function (e) {		
	$scope.$watch('editArea', function(newValue, oldValue) {
	if (newValue !== oldValue) { return } // AKA first run
		$scope.editArea = $scope.mes[e].Message
	});
}

4.多维嵌套

<div ng-app>
    <div ng-controller="test">
        <div ng-repeat="links in slides">
            <hr/>
            <div ng-repeat="link in links track by $index">
                {{link}}
            </div>
        </div>
    </div>
</div>


function test($scope) {
    $scope.slides = [
        [ 1, 1, 1 ],
        [ 4, 5, 6 ],
    ];
}