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>

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

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

'type'字段用于指令的逻辑中，以了解是将该项目视为字符串还是函数。

这是一个小提琴：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 - 但是为了充分利用Angular你需要以Angular方式思考 - 使用绑定，不要直接操纵DOM等。

对于这个例子，阅读使用的隔离范围绑定会很有帮助 - “@”和“=”，请参阅：

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

在指令的jqlite生成的html中使用控制器范围的数据

1 个答案: