2016-11-15 3 views
0

サービスと$リソースを使用してREST APIを検索し、その結果をコントローラーに渡すための指令を作成しました。コードは次のようになります。コントローラー関数から指令を呼び出してもスコープが更新されない

app.controller('productsCtrl', ['$scope', function ($scope) { 
    var self = this; 
    self.selection; 

    self.searched = function (selected) { 
     self.selection = selected; 
    }; 
}]); 

app.service('productsService', ['productsResource', function (productsResource) { 
    var self = this; 

    self.findProducts = function (search) { 
     return productsResource.query({ 
      sku: search 
     }); 
    }; 
}]); 

app.factory('productsResource', ['$resource', function ($resource) { 
    return $resource('products/:sku', { 
     id: '@sku' 
    }); 
}]); 

app.directive('productSearch', ['productsService', function (productsService) { 
    return { 
     restrict: 'E', 
     scope: { 
      productSelected: '&' 
     }, 
     templateUrl: '/products/product_search.html', 
     link: function (scope) { 
      scope.findProducts = function (search) { 
       scope.searchResults = productsService.findProducts(search); 
      }; 
      scope.selectResult = function (selected) { 
       scope.selection = selected; 
       scope.showResults = false; 
      }; 
     } 
    }; 
}]); 

関連するHTMLの行は、次のとおりです。

<div ng-show='products.selection'> 
    {{products.selection.name}} //does not update 
</div> 

とディレクティブのテンプレートから

は:

<div ng-click="productSelected({selected: selection})"></div> 

は、問題は私のモデルが更新されないときのディレクティブコントローラメソッドを呼び出します(最後の検索結果が表示されます)。そこには「角張った」機能が呼び出されていないので、私には分かります。しかし、どうすればこれを動作させることができますか?私は$scope.$apply()で試しましたが、それはエラーを投げます。

私はそれを正しくやっているのですか?これは角度的な方法ですか?特に、ディレクティブ内のサービスを使用し、ディレクティブからコントローラに物事を渡すか?

編集:私はあなたがディレクティブからのコールバックが欠けていると思う

<div> 
    <product-search product-selected='products.searched(selected)'></product-search> 
    <div ng-show='products.selection'> 
     {{products.selection.name}} 
    </div> 
</div> 
+0

ディレクティブを使用している場所でhtmlを表示できますか? –

答えて

1

: これは(controllerAsを使用して)全体のHTMLファイルです。指示文のscope.selectResult関数内に

scope.productSelected({selected: selection}) 

を追加する必要があります。完全なコードは次のようになります

scope.selectResult = function (selected) { 
    scope.selection = selected; 
    scope.showResults = false; 
    scope.productSelected({selected: selected}); // add this 
}; 
+0

ちょうどそれを試しても動作しません。コントローラーメソッドが呼び出されたときに渡された引数が「未定義」である場合 – smdufb

+0

引数として{selected:selection}に必要な答えを更新しました。コントローラーに値が設定されているかどうかを確認してください。 –

+0

これは動作します、ありがとうございます。しかし、なぜこれが動作し、 'ng-click =" productSelected({selected:selection}) "というのが分からないのですか?それは彼らが角度のある文書でそれをする方法です。 – smdufb

関連する問題