6

有问题的指令是这个人： 基于属性的指令中的动态模板？

无论如何，这就是我想要完成的。

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

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

标题栏指令：

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;
      // }
    }
  }
});
4

2 回答 2

7

您有多种选择来完成此操作。

$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指令中的隔离范围访问父范围。我不推荐这样做，因为它会在指令和控制器之间创建紧密耦合，但它是一种选择。

于 2013-06-28T23:56:34.973 回答
1

我假设您想将其传递回父控制器。在您的范围属性中，您使用“@”绑定，这是一种方式。您可以使用“=”来绑定两种方式。我做了一个 Plunker 来展示这个：http ://plnkr.co/edit/HBPcsT?p=preview

以防万一您需要将其保留在指令中，我也展示了一个示例。

于 2013-06-28T23:26:28.880 回答