1

这个问题与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>

'item' 字段引用了我的控制器中的范围数据：

$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 的帖子中得到这个：

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

...虽然它确实将值放在字段中，但它们不受计算约束，正如您通过更改我的小提琴中的输入所看到的那样。

是否有更好和/或更直观的方法将我的控制器范围数据链接到我的指令中的 jqlite 生成的 html？

4

1 回答 1

3

看看这个，我认为您可以简化流程。

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——但要充分利用 Angular，你需要以 Angular 的方式思考——使用绑定，不要直接操作 DOM 等。

对于此示例，阅读使用的隔离范围绑定会很有帮助 - '@' 和 '='，请参阅：

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

于 2013-03-04T22:15:10.197 回答