爲什麼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; 
       }); 
      }); 
     } 
    } 
}); 

Fiddle

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; 

});