改进 AngularJS 指令代码

2024-02-02

我写了一个 AngularJS 指令，但我对它还很陌生，我不知道我是否以“Angular 方式”完成......

这是我的代码：http://plnkr.co/edit/X1tOk4z8f6dCK3mfB7HP?p=preview http://plnkr.co/edit/X1tOk4z8f6dCK3mfB7HP?p=preview

html:

<!DOCTYPE html>
<html ng-app="app">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta charset=utf-8 />
<title>Directive Test</title>
<script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">

  <button id="button1" ng-click="dummyClickFoo()" wait-button="foo"><i></i> Foo</button>
  <button id="button2" ng-click="dummyClickBar()" wait-button="bar"><i></i> Bar</button>

</body>

</html>

js:

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

app.controller('MainCtrl', function($scope) {
    $scope.dummyClickFoo = function() {
        $scope.startSpinner('foo');

        setTimeout(function() {
                $scope.stopSpinner('foo');
          }, 3000);
    };

    $scope.dummyClickBar = function() {
        $scope.startSpinner('bar');

        setTimeout(function() {
                $scope.stopSpinner('bar');
          }, 3000);
    };
});


app.directive('waitButton', function() {
    return {
        restrict: 'A',
        controller: ['$scope', '$element', function($scope, $element) {
            $scope.startSpinner = function(id) {
                var el = angular.element(document.querySelector('[wait-button="'+id+'"]'));
                el.children('i').text('searching...');
            };

            $scope.stopSpinner = function(id) {
                var el = angular.element(document.querySelector('[wait-button="'+id+'"]'));
                el.children('i').empty();
            };
        }]
    };
});

我发现document.querySelector('[wait-button="'+id+'"]')部分，它有点“令人讨厌”......（或者不是？）；否则我不知道在同一控制器中不同时间重复使用同一指令的更好方法。有人可以建议我更好的代码吗？

谢谢。

访问指令中的元素

我建议使用link此类事物的函数：

link: function($scope, elem, attrs){ /* do something w. elem */ }

这不是很有角度的访问控制器中的元素。这就是整个要点link & compile指令对象的功能....

...但在极少数情况下这是合理的。注射的$element在你的控制器中引用同样的东西angular.element(document.querySelector('[wait-button="'+id+'"]'))代码正在做。你只需要使用$element在此刻。但我可以推荐一种更有角度的方法吗？

之间的沟通。控制器和指令

另一个问题是您如何基本上将您的意图从指令传达到主控制器并返回指令。您的用例与大多数用例略有不同，因为您具有异步性质。

我制作了一个利用隔离范围和回调参数的示例。在大多数现实场景中，您将处理异步回调的承诺。因此，我使用了.finally来自承诺执行回调的逻辑，该回调与任何异步逻辑已包装的指令进行通信。

在我的例子中要记住的事情：

我使用咖啡脚本，因为我这样编码
我用CSS/DOM来驱动how the loading指令的状态应该出现，而不是尝试以编程方式执行。在我的书中，程序化的 DOM 操作是非常反对NG的。指令为您提供了足够的功能来以声明方式执行此类操作。
我没有使用指令控制器，因为除非您要为指令使用模板，否则您实际上不需要自定义控制器。当你去的时候有一条模糊的线link函数与自定义指令控制器。
哦...我使用了 *controller as• 语法，因为如果你读到任何有关 NG 走向的内容，他们就会远离整个整体$scope范例。

笨蛋-http://plnkr.co/edit/0AvlCQW5qqkpYKl2WpB3?p=preview http://plnkr.co/edit/0AvlCQW5qqkpYKl2WpB3?p=preview

声明式用户界面

主控制器

.controller 'MainCtrl', class MainCtrl
  @$inject = [
    '$scope'
    '$interval'
  ]

  constructor: ($scope, @$interval)->
    @viewData = 'Skynet 2.0'
    @isLoading = false

  callbackExample: ($callbackFunc)->
    @loadRqst()
    .finally -> $callbackFunc?()

  loadRqst: ->
    @isLoading = 1
    # this returns a promise which gets processed in the example functions
    @$interval => 
      console.log @isLoading++
    , 250, 10 
    .finally => 
      @isLoading = false

实施用户界面

<button callback-btn="vc.callbackExample($callbackFunc)">
  Callback Example<i> - I'm loading & I'm #1</i>
</button>

<button callback-btn="vc.callbackExample($callbackFunc)">
  Callback Example<i> - Look I can load too, I'm #2</i>
</button>

css

[callback-btn] i{
  display: none;
}

[callback-btn].loading i{
  display: initial;
}

该指令

.directive 'callbackBtn', ($parse)->
  dir =
    restrict: 'A' 
    scope: { callbackBtn: '&' }
    link: ($scope, elem, attrs)->

      onCallback = ->
        console.log 'on callback'
        elem.removeClass 'loading'

      elem.on 'click', ->
        elem.addClass 'loading'
        $scope.$apply ->
          $scope.callbackBtn({$callbackFunc: onCallback})

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)