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>

但似乎都不起作用。在使用“类语法”时，我找不到有关如何为范围传递变量的任何文档。

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时将范围变量传递给指令

1 个答案: