Angularjs：如何使用Jquery讀取作用域呈現值

Question

我正在處理一個angularjs項目。並且真的想知道如何訪問由jQuery（或其他JavaScript代碼）按範圍呈現的值。這裏是我的模板的一部分：

<div class="bars" data-label="Population" data-val="{{town.population}}" data-color="#cccccc"> 

所以，我要去使用由範圍渲染的data-val屬性的值。我做這樣的：

TownApp.directive('bars', function() { 
    return { 
    restrict: 'C', 
    link: function (scope, elem, attrs) { 
     // I tried : this will get value: {{town.population}} as a string itself. 
     $(".bar").jqbar({value: $(this).data('val'); 
     // also tried: this will get undefined 
     elem.jqbar({ value: attrs.val}); 
     // and so on...... 
    } 
    } 
} 

}）

正如我在評論中所描述的，似乎同時指令運行，範圍值仍沒有呈現到頁面，從而使進一步規範無法正確讀取值。

所以，我的問題是我該如何做到這一點？非常感謝 ！

UPDATE：

添加控制器和工廠代碼：

var TownApp=angular.module('TownApp',['ngRoute','ngResource']); 

TownApp.factory('Town', function($http) { 
    return $http.get('/database.json').then(function(response){ 
     return response.data; 
    }) 
}); 

var TownCtrl = TownApp.controller('TownCtrl',function($scope, $routeParams, Town, $location){ 
    Town.then(function(response){ 
    $scope.towns = response; 

    for (var i = 0; i < response.length; i++) { 
    if(response[i].Code === $routeParams.townId){ 
     var currentTown = response[i]; 
    } 
     $scope.town = currentTown; 
    } 

    //....... 
}); 

}）

Answer 1

首先，改變你的data-val="{{town.population}}"到data-val="town.population"，我們可以直接從該得到它。

然後，我們要在指令中使用scope.$eval：

TownApp.directive('bars', function() { 
    return { 
    restrict: 'C', 
    link: function (scope, elem, attrs) { 
     // evaluate attribute contents 
     elem.jqbar({ value: scope.$eval(attrs.val) }); 
    } 
    } 
} 

另外，如果你希望能夠更新人口的價值和具有實時欄的變化（如果jqbar支持，我不知道）：

TownApp.directive('bars', function() { 
    return { 
    restrict: 'C', 
    link: function (scope, elem, attrs) { 
     elem.jqbar({ /* whatever options you want */ }); 
     scope.$watch(attrs.val, function(val) { 
      // I'm not sure of the exact call the update the widget, 
      // but it's probably something like this 
      elem.jqbar('option', 'value', val); 
     }); 
    } 
    } 
} 

還有第三種方式，通過使用分離的範圍，但如果你有相同的元素上的其他指令，這可能會導致問題：

TownApp.directive('bars', function() { 
    return { 
    restrict: 'C', 
    // Make a new isolate scope 
    scope: { val: '=' }, 
    link: function (scope, elem, attrs) { 
     elem.jqbar({ value: scope.val }); 
     // If you want to $watch this value for changes, 
     // use scope.$watch('val', function() {...}) 
    } 
    } 
}