AngularJS：通過服務更新將指令綁定到控制器

如何通過服務更新將指令綁定到控制器？AngularJS：通過服務更新將指令綁定到控制器

我想通過指令（添加到購物車按鈕）創建更新購物車（服務）的可能性，然後控制器（顯示購物車）將更新其視圖。儘管我在服務本身上添加了手錶，但我的控制器並未更新。

當然，這將是一件好事，如果控制器和指令不共享相同的範圍（transclude：真正的指令）

服務：

angular.module('stamModule', []) 
    .factory('valueService', function() { 
    var factory = { 
     data: {value: 1000}, 
     inc: inc, 
     getData: getData 
    }; 

    function inc() { 
     this.data.value++; 
    } 

    function getData() { 
     return this.data; 
    } 

    return factory; 
})

指令：

.directive('buttonDirective', function (valueService) { 

    var directive = { 
     restrict: 'E', 
     template: '<button>Inc</button>', 
     link: linkFnc 
    }; 

    function linkFnc(scope, el) { 
     el.on('click', function() { 
      valueService.inc(); 
     }); 
    } 

    return directive; 
})

控制器：

.controller('FirstController', function ($scope, valueService) { 
    var vm = this; 
    vm.serv = valueService; 

    $scope.$watch('vm.serv.getData()', function (newValue) { 
     console.log("watch"); 
     console.log(newValue); 
    }); 
})

的HTML：

<body ng-app="stamModule"> 
<hr> 
<div ng-controller="FirstController as vm"> 
    <p>{{vm.serv.data}}</p> 
    <button-directive ></button-directive> 
</div>

這裏有一個演示： https://jsfiddle.net/07tp4d03/1/

感謝

來源

2015-11-08 Eliel Haouzi

所有你所需要的代碼是輕輕一推。無需事件廣播或類似的東西。

問題是，點擊事件偵聽器在Angular的摘要循環之外工作，因此Angular手錶並不適合你。如果您將您的指令代碼更改爲以下代碼，它將起作用。

.directive('buttonDirective', function (valueService) { 

    var directive = { 
     restrict: 'E', 
     template: '<button ng-click="inc()">Inc</button>', 
     link: linkFnc 
    }; 

    function linkFnc(scope) { 
     scope.inc = function() { 
      valueService.inc(); 
     }; 
    } 

    return directive; 
})

這裏是一個fork of your fiddle that works

來源

2015-11-08 12:39:00 yarons

太棒了！我們也不需要控制器中的$ watch，因爲我綁定了服務對象，然後角度傳遞它的引用。我更新了小提琴： https://jsfiddle.net/xnk0h91w/1/ @MaximShoustin：這是一個更好的解決方案，因爲我們不需要使用任何廣播事件，然後解決方案更乾淨。謝謝你們兩位！ –

AngularJS：通過服務更新將指令綁定到控制器

回答

相關問題