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绑定发生后，您的模板将绑定到'='。

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

1 个答案: