angularjs - 从指令设置 $scope 变量

Question

有问题的指令是这个人: Dynamic template in directive based on attributes?

无论如何，这就是我想要实现的目标。

这个<titlebar>指令可以采用名为 edit-button 的属性。如果存在，并且单击按钮时，我想在 Controller 中设置一个 $scope 变量，该变量将切换按钮的可见性以删除/编辑项目。

例如，如果我设置 $scope.currentlyEditting = true;在我的指令中，我会将其绑定(bind)到 Controller ，然后使用 ng-show显示/隐藏控件。我只是不确定如何将这些数据输入我的 Controller 。

titleBar 指令:

robus.directive("titlebar", function() {
  return {
    restrict: "E",
    template: "<header class='bar-title' ng-class='{\"sub-view\": view}'>"+
              "<a class='button' ng-click='goBack()' ng-show='back'><i class='icon-arrow-left'></i> Back</a>" +
              "<h1 class='title' ng-transclude>" +
              "<span class='sub-title' ng-show='view'>{{view}}</span></h1>" +
              "<a class='button' ng-click='showEdit()' ng-show='edit'>Edit</a>" +
              "</header>",
    scope: {
      view: '@view',
      edit: '@editButton',
      back: '@backButton'
    },
    transclude: true,
    replace: true,
    link: function ($scope, $element, attrs, ctrl) {
      // $scope.$apply();
    },
    controller: function($scope, $element, $attrs, $location, $routeParams) {
      /* simple back button implementation */
      $scope.goBack = function() {
        history.back(-1)
      }

      // $scope.showEdit = function() {
      //   $scope.currentlyEditting = true;
      // }
    }
  }
});

Answer 1

您有多种选择来完成此任务。

您可以使用$scope.$eval(attrs.editButton)(或view或backButton)来代替创建隔离范围处理指令中的属性。然后，您可以在您工作的任何范围内设置变量并调用函数。

如果您想继续使用隔离范围，您还可以使用 & 传入一个函数，该函数可以切换编辑模式。

这将像这样完成:

// In the directive
template: '...<a href="" ng-click="toggleEdit()">Edit</a>...',
scope: {
  ...
  toggleEdit: '&',
  ...
}

// In the HTML (or directive template)
<titlebar ... toggle-edit="toggleEditMode()" ...>...</titlebar>

// In the controller (ngController, not directive controller)
$scope.toggleEditMode = function() {
  $scope.editMode = !$scope.editMode;
}

最后，您还可以使用 $scope.$parent 从指令中的隔离范围访问父范围。我不推荐这样做，因为它会在指令和 Controller 之间创建紧密耦合，但它是一个选项。