為什么angularjs指令繼承范圍但不更改范圍變量？

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);
        })
    };

}）（）;

Answer 1

Click事件回調在Angular世界之外執行。 您需要使用$apply ：

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

小提琴

Answer 2

嘗試這個 ：

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;

});