角度 - 指令控制器 - $attrs值作为对象

Question

我对Angular相当陌生（第3天）。我有以下看法：

    <div ng-repeat="keyword in vc.promotionData.keywords">
      <keyword data="keyword"></keyword>
    </div>

我的keyword指令如下：

promotionApp.directive("keyword", ->
  template = """
      <span class="input-append">
        <input type="text" value="{{data.value}}" ng-model="_value"
        placeholder="Add Search Keyphrase (3-5 words)" class="span12"
        id="appendedInputButton">
        <button class="btn" type="button" ng-click="saveKeyword({{data.id}}, {{data.promotion_id}}, _value)">Save</button>
        <button class="btn" type="button" ng-click="saveKeyword({{data.id}}, {{data.promotion_id}}, _value)">Delete</button>
      </span>
  """
  return {
    restrict: "E"
    transclude: true
    template: template
    replace: true
    scope: {}
    controller: ($scope, $element, $attrs) ->
      $scope.data = $attrs.data
      $scope.saveKeyword = (id, promotion_id, value) ->
        value ?= ""
        if id and promotion_id
          if value.length is 0
            console.log "saveKeyword::delete"
          else
            console.log "saveKeyword::save #{value}"
  }
)

所以，我想做的是从我的HTML视图中，将keyword对象传递给指令（关键字是JSON）。

在将控制器添加到指令中之前，我可以这样做：

scope: { data:"=" }

但是使用控制器，它不起作用。所以我的问题是，我现在如何从 HTML 获取keyword对象，进入其控制器中的keyword指令$scope？

编辑：实际上，范围和控制器确实可以一起工作。我的坏。

    promotionApp.directive("keyword", ->
  template = """
      <span class="input-append">
        <input type="text" ng-model="data.value"
        placeholder="Add Search Keyphrase (3-5 words)" class="span12"
        id="appendedInputButton">
        <button class="btn" type="button" ng-click="saveKeyword(data.id, data.promotion_id, data.value)">Save</button>
        <button class="btn" type="button" ng-click="saveKeyword(data.id, data.promotion_id, '')">Delete</button>
      </span>
  """
  return {
    restrict: "E"
    transclude: true
    template: template
    replace: true
    scope: { data:"=" }
    controller: ($scope, $element, $attrs) ->
      console.log $scope.data
      $scope.saveKeyword = (id, promotion_id, value) ->
        value ?= ""
        console.log "#{id} #{promotion_id} #{value} "
        if id and promotion_id
          if value.length is 0
            console.log "saveKeyword::delete"
          else
            console.log "saveKeyword::update"
        else if promotion_id and value.length > 0
          console.log "saveKeyword::create"
        $element.remove()
  }
)

Answer 1

如果您设置了scope: { data:"=" }，则不应设置$scope.data = $attrs.data 。 实际上，如果设置$scope.data = $attrs.data，则$scope.data设置为字符串值 "keyword" ，而不是对象。

通过使用 scope: {data: '='} ，则$scope.data将被绑定，并将使用对data的任何更改进行更新。

此外，不要假设在初始化控制器代码时将设置$scope.data。 根据它的使用方式，它可能存在也可能不存在。

一旦发生'='绑定，模板将绑定到data。