AngularJS: bind directive to controller through service update

Question

AngularJS: bind directive to controller through service update

How to associate a directive with a controller through a service update?

I want to create an opportunity to update the basket (service) using the directive (add to the basket), and then the controller (displaying the basket) will update its presentation. Despite the fact that I have added hours to the service, my controller is not updated.

Of course, it will be good if the controller and the directive do not have the same scope (transclude: true in the directive)

Service:

    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:

 .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:

.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>

demo here: https://jsfiddle.net/07tp4d03/1/

thanks

+4

javascript angularjs angularjs-service angularjs-scope angularjs-directive

Eliel haouzi Nov 08 '15 at 12:04

source share

1

yarons · Accepted Answer · 2015-11-08T12:39:00+0000

. - .

, Angular digest, , , 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;
})

,

AngularJS: bind directive to controller through service update

More articles: