如何在AngularJs中單擊某個按鈕時設置一個指令的值

Question

我在代碼中有一些註釋。但這是它的基礎。我有一個跨度，我有一個按鈕。當按鈕被點擊時，我想更新span的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() { 

     }); 
    } 
    }; 
}); 

Answer 1

我不認爲你在這裏需要指令，這可以簡單得多。在您的控制器

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

然後：

在視圖中直接把這些

$scope.count = 0; 

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

工作例如：http://jsbin.com/ehohud/1/edit