Question

我正在为AngularJs 1.6.4创建一个指令，试图完成以下任务：

<my-tag exec="console.log('Exec from tag')"/>
<my-tag/>

在第一种情况下，用户指定了exec param，因此，在指令链接中，我想调用它。

在第二种情况下，用户没有指定exec，因此，我想将新函数绑定到元素。

两种方式，都要调用exec函数（＆＃39;点击＆＃39;）。

我已经完成了这段代码：

directive

scope: {
    exec: '='
},

link: function(scope, element, attrs) {
    var doClick = function (ev) {
        ev.preventDefault();
        ev.stopPropagation();
        console.log('Exec was not there');
    };

    element.on('click', scope.exec ? scope.exec : self.doClick);
}

如果单击带有exec参数的标记，则不会发生任何事情。如果我点击另一个标签，它就可以了。任何想法??

由于问候。

Answer 1

您应该使用&而不是=。你想要一个功能，而不是双向绑定。请参阅范围内的$ compile文档，在这里：$compile documentation

请注意，使用&时，您将始终获得exec函数，无论您的指令用户是否提供了一个。您可以通过选中exec来检查用户是否提供了attrs。

以下是一个例子。

(function(angular) {
  'use strict';

  angular
    .module('Test', [])
    .controller('TestCtrl', [function() {
      const vm = this;

      vm.doStuff = () => console.log('HIT!');
    }])

    .directive('myDir', [function() {
      return {
        scope: {
          exec : '&'
        },
        link: function(scope, ele, attrs) {
          // Here's how you call the passed in function.  It will always
          // be a function regardless of whether or not the user supplied
          // one.
          scope.exec();

          // Here's how to check if "exec" was user supplied.
          if (attrs.hasOwnProperty('exec'))
            console.log('User provided.');
        }
      };
    }]);
})(window.angular);

HTML看起来像这样：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="Test" ng-controller="TestCtrl as vm">
    <my-dir exec="vm.doStuff()"></my-dir>
  </body>

</html>

工作插件，在这里：https://plnkr.co/edit/K3FZzll0pzOHL51BZ1Bs?p=preview

Angularjs 1x将函数传递给AngularJS指令

1 个答案: