限制时如何将范围变量传递给指令：class

Question

将指令用作类时将变量传递到作用域的语法是什么？

说，我有一个指令：

angular.module('app').directive('revealOverlay', ['$state', '$window',
  function ($state, $window) {
    return {
      scope: {
        cancelStateName: "=?"
      },
      restrict: 'C',
      link: function (scope, element) {
        if (scope.cancelStateName == undefined) { scope.cancelStateName = ".^" }
        element.on('click', function (e) {
          $state.go(scope.cancelStateName)
        }
      });
    }
  }
}

link 为未传入的 canceStateName 设置默认值。cancelStateName 的具体作用或使用方式与此处的问题无关。

那么，当我使用这个指令时，我该如何分配一个 cancelStateName 给它？

我试过了

<aside class="reveal-overlay" cancel-state-name="xxx">...</aside>

或

<aside class="reveal-overlay: { cancelStateName: 'xxx'} ">...</aside>

但似乎都不起作用。在使用 "class syntax".

时，我找不到任何关于如何为范围传递变量的文档

Answer 1

您的第一个示例应该有效。当您在指令上使用 restrict: C 时，您可以通过附加标签传递绑定。

假设控制器是这样的：

app.controller('MainCtrl', function($scope) {
  $scope.directiveTitle = "Title for directive";
});

还有这样的视图和指令：

<div class="test-directive" title="directiveTitle"></div>

app.directive('testDirective', function() {
  return {
    scope: {
      title: '='
    },
    restrict: "C",
    template: '<div>{{title}}</div>'
  };
});

这里有一个例子 plunkr：https://plnkr.co/edit/HaYkxbWBlbzL1YcNrtBZ

如果正确设置指令，第二个示例的变体也可以工作：

<div class="test-directive: directiveTitle"></div>

app.directive('testDirective', function() {
  return {
    scope: {
      title: '=testDirective'
    },
    restrict: "C",
    template: '<div>{{title}}</div>'
  };
});

一个笨蛋：https://plnkr.co/edit/vEy7htKpRXzWdYU9W9qo

限制时如何将范围变量传递给指令：class

How to pass scope variables into a directive when restrict: class

angularjs

angularjs-directive

angularjs-scope