1

我对 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:"=" }

但是使用控制器，它不起作用。所以我的问题是，我现在如何keyword从 HTML 中获取对象到其控制器中的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()
  }
)
4

1 回答 1

3

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

通过使用scope: {data: '='}, then$scope.data将被绑定并且会随着对data.

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

您的模板将data在绑定发生后立即'='绑定。

于 2013-09-29T15:35:21.920 回答