why angularjs directive inherit the scope but doesn't change the scope variable?

Question

(function () {
'use strict'

var pagesize = 5;
var memberManager = angular.module('memberManager',['mydirective'],function ($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
})

memberManager.constant('apiUri', {
    getMembers: '/membermanage/get',
    charge: '/membermanage/charge',
    exchange: '/membermanage/exchange'
});
memberManager.factory('managerService',function ($http,apiUri) {
    return {
        getMembers: function (data) {
            return $http.get(apiUri.getMembers,{ params: data });
        },
        charge: function (data) {
            return $http.post(apiUri.charge,data);
        },
        exchange: function (data) {
            return $http.post(apiUri.exchange,data);
        }
    }
});



memberManager.directive('modalWin',function () {
    return {
        restrict: 'A',
        link: function (scope,elem,attrs) {
            var modalWinId = attrs.targetid;
            var clickHandler = function () {
                var index = $(elem).attr('index');
                scope.$apply(function () {
                    scope.itemIndex = parseInt(index);
                    scope.chargeModel.index = parseInt(index);
                });
                $('#' + modalWinId).modal();    
                scope.$on('http:cash',function () {
                    $('#' + modalWinId).modal('hide');
                });
                scope.$on('http:exchange',function () {
                    $('#' + modalWinId).modal('hide');
                });
            };
            $(elem).bind('click',clickHandler);
        }
    }
})

memberManager.controller('manCtrl',function ($scope,managerService,$rootScope,managerHelper) {

    $scope.isLoadingData = true;

    $scope.chargeModel = {
        index: 0,
        cash_num: 0,
        cash_store: '',
        cash_stuff: ''
    };

    // which item to be edit?
    $scope.itemIndex = 0;
    $scope.test = {
        index: 0
    };
    $scope.exchangeModel = {
        exchange_number: 0,
        exchange_way: 1,// 直接消费
        exchange_store: '',
        exchange_pass: ''
    }

    $scope.loader = {
        exchange: false,
        cash: false
    };


    $scope.exchange = function () {
        alert($scope.itemIndex);
        $scope.loader.exchange = true;
        var data = {
            exchange_number: $scope.exchangeModel.exchange_number,
            exchange_wechat_id: $scope.model[$scope.itemIndex].wc_openid,
            exchange_type: $scope.exchangeModel.exchange_type
        };

        console.log(data);
        managerService.exchange(data).success(function (data) {
            $scope.loader.exchange = false;
            $rootScope.$broadcast('http:exchange');
            $scope.getData($scope.currentPageIndex);
        })
    };

})();

AlwaysALearner · Accepted Answer · 2014-03-05 13:18:18Z

1

Click event callbacks execute outside Angular world. You need to use $apply:

demo.directive('testD',function(){
    return {
        restrict: 'A',
        link: function(scope,elem,attr){
            $(elem).click(function(){
                scope.$apply(function(){
                   scope.val = 5;
                });
            });
        }
    }
});

Fiddle

edited Mar 5, 2014 at 13:18

answered Mar 5, 2014 at 12:59

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Daniel.Woo Over a year ago

but if the "val" was "scope.model={val: 0};then works

AlwaysALearner Over a year ago

@Daniel.Woo Your directive syntax is not valid. Take a look at my update.

Daniel.Woo Over a year ago

I've updated my code ,please notice the "$scope.itemIndex"...it dosen't change thank you a lot

Daniel.Woo Over a year ago

"$scope.itemIndex" was in the controller ,and I change it in the directive,I'm sorry for you to take time to find that ..cuz I'm so worried ..thx again

AlwaysALearner Over a year ago

You mean you have found the issue?

|

Paul Rad · Accepted Answer · 2014-03-05 13:01:57Z

0

Try this :

var demo = angular('demo',[]);
demo.directive('testD',function(){
   restrict: 'A',
   scope: {
      'val': '=' // here the fix
   },
   link: function(scope,elem,attr){
       $(elem).click(function(){
           scope.val = 5;
       });

   }
});


demo.controller('testCtrl',function($scope){
  $scope.val = 0;

});

answered Mar 5, 2014 at 13:01

Paul Rad

4,8821 gold badge26 silver badges23 bronze badges

1 Comment

Daniel.Woo Over a year ago

you mean two-way-binding? but I haven't defined the isolate-scope,so there's no need to defined a reference to the $scope,right?

Collectives™ on Stack Overflow

why angularjs directive inherit the scope but doesn't change the scope variable?

2 Answers 2

11 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related