0

私のコードにはいくつかのコメントがあります。しかし、ここにその基本があります。スパンがあり、ボタンがあります。ボタンがクリックされたときにスパンのhtmlを更新したい。スパンはコントローラ プロパティの値にバインドされます。モデルを使用してみましたが、うまくいきませんでした。これが私のコードです

app.controller('CartController', function($scope) {
  this.count = 0;

  this.getCount = function() {
    return count;
  };
  this.addProduct = function() {
    this.count = this.count + 1;
    return this.count;
  };
});

//this is a span with a value set to the number of items in the cart
app.directive('cartCount', function() {
  return {
    restrict: 'A',
    controller: 'CartController',
    template: '<span>{{count}}</span>',
    transclude: true,
    link: function(scope, element, attrs, CartController) {

      //I can initially set the value 
      scope.count = CartController.count;

      //but later how do I watch the value of the CartControllers count property and sync it with the value of this?
    }
  };
});

//this is a button
app.directive('addProduct', function() {
  return {
    restrict: 'C',
    controller: 'CartController',
    link: function(scope, element, attrs, CartController) {

      //when button is clicked I want the cartCount directives value to be updated 
      element.click(function() { 

      });
    }
  };
});
4

1 に答える 1

3

ここではディレクティブはまったく必要ないと思います。これはもっと簡単です。

これらをあなたのビューに直接入れてください：

<span>{{count}}</span>
<a href="#" ng-click="addProduct()">Add Product</a>

次に、コントローラーで：

  $scope.count = 0;

  $scope.addProduct = function() {
    $scope.count++;
  };

作業例: http://jsbin.com/ehhud/1/edit

于 2013-03-28T03:02:29.687 に答える