在指令的jqlite生成的html中使用控制器作用域數據

Question

這個問題與Mike的帖子Using ng-model within a directive中的一個問題類似。

我正在寫一個小電子表格的頁面，它根據用戶輸入字段顯示計算輸出。使用指令，我在做自定義標籤是這樣的：

<wbcalc item="var1" title="Variable 1" type="input"></wbcalc> 
<wbcalc item="var2" title="Variable 2" type="input"></wbcalc> 
<wbcalc item="calc" title="Calculation" type="calc"></wbcalc> 

的「項目」字段的引用範圍的在我的控制器數據：

$scope.var1 = '5'; // pre-entered input 
$scope.var2 = '10'; // pre-entered input 
$scope.calc = function() { 
    return parseInt($scope.var1) + parseInt($scope.var2); 
}; 

和「類型」字段中指令的使用知道是否將該項目視爲字符串或函數的邏輯。

下面是這個小提琴：http://jsfiddle.net/gregsandell/PTkms/3/我可以輸出的元素與代碼的驚人行工作：

html.append(angular.element("<span>") 
    .html(scope.$eval(attrs.item + "()")) 
); 

...和我使用的這個讓我輸入連接到我的作用域控制器的數據（我得到這個從Mike's post：

var input = angular.element("<input>").attr("ng-model", attrs.item); 
$compile(input)(scope); 
html.append(input); 

...而它並把值在田間地頭，他們沒有必然的計算，你可以在我的小提琴變化的輸入信號看到

有沒有更好的和/或更直觀的方法來將我的控制器作用域數據鏈接到我的指令中的jqlite生成的html？

Answer 1

看看這個，我認爲你可以簡化這個過程。

http://jsfiddle.net/PTkms/4/

angular.module('calculator', []).directive('wbcalc', function($compile) { 
    return { 
     restrict: 'E', 
     template: '<div><div class="span2">{{title}}</div><input ng-model="item"></div>', 
     scope: { 
      title: '@', 
      item: '=' 
     }, 
     link: function(scope, element, attrs) { 
      // Don't need to do this. 
     } 
    } 
}); 
function calcCtrl($scope) { 
    $scope.var1 = '5'; 
    $scope.var2 = '10'; 

    $scope.calc = function() { 
     // Yes, this is a very simple calculation which could 
     // have been handled in the html with {{0 + var1 + var2}}. 
     // But in the real app the calculations will be more 
     // complicated formulae that don't belong in the html. 
     return parseInt($scope.var1) + parseInt($scope.var2); 
    }; 
} 

我知道你說你喜歡jQuery的 - 而是爲了讓你需要考慮在角度的方式角的最佳使用 - 使用綁定，不操作DOM直接等

對於這個例子，這將是有幫助的所使用的分離的範圍綁定讀到 - 「@」和「=」，見：

http://docs.angularjs.org/guide/directive