0

我在绑定到 $scope.templates 的下拉列表中有一系列模板：

[{"id":1, "name":"Test 1",{"id":2, "name":"Test 2"}].

我也有一个指令，

<editor data-template="1"></editor>

根据下拉列表中选择的模板，它应该使用适当的模板重新呈现指令。这可能吗？迄今为止，我只看到了简单的字段到 div 的一对一数据绑定，并且没有触发整个指令的重新呈现。这种情况的最佳方法是什么？

更新：指令 $scope 更基本的是跨控制器双向绑定。例如，我似乎无法弄清楚如何使服务对象在控制器之间保持同步。我真正希望发生的是一个控制器中的更改可用于另一个控制器，反之亦然。http://jsfiddle.net/9gSVn/1/

4

1 回答 1

1

一种方法是创建一个指令，在范围值更改时替换 html 内容。这篇博文非常有助于描述使用动态模板创建指令的步骤。

这是一个带有监视模型更改指令的示例小提琴：

module.directive('template', function () {
    var getTemplate = function (id) {
        var template = '<div>no template for ' + id + '</div>';

        switch (id) {
            case 1:
                template = '<div>template 1 from directive</div>';
                break;
            case 2:
                template = '<div>template 2 also from directive</div>';
                break;
        }

        return template;
    }
    return {
        restrict: 'E',
        replace: true,
        scope: { id: '=templateId' },
        link: function (scope, element, attrs) {
            scope.$watch('id', function (newValue, oldValue) {
                element.html(getTemplate(newValue));
            });
        }
    };
});
于 2012-10-23T18:44:53.253 回答