Question

看看这个小提琴：http://jsfiddle.net/z9XK3/6/

<div ng-app="miniapp">
    <div ng-controller="Ctrl">
        <span ng-bind-html-unsafe="variable"></span>       
        <span ng-bind-html-unsafe="variableB"></span>      
        <span class="clone">Clone me Clone me</span>
    </div>    
</div>

<div class="destination"></div>

var $scope;
var app = angular.module('miniapp', []);

function Ctrl($scope) {
    $scope.variable = $('<span>100</span>');
    $scope.variableB = 'String';
}

app.directive('clone', ['$compile', function($compile) {
    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            element.bind('click', function(){
              var newTemplate = '<span ng-bind-html-unsafe="variable"></span><span ng-bind-html-unsafe="variableB"></span> ';
              var compiledOutput = $compile(newTemplate)(scope);
              scope.$apply();
              compiledOutput.prependTo($('.destination'));
            });
        }
    };
}]);

尝试点击“克隆我克隆我链接”

请注意，在原始模板中，<span>100</span>消失，因为它是一个对象，而'String'字符串仍会出现。

为什么会这样？此外，我如何防止这种情况，一旦我点击“克隆我克隆我”链接，原始的<span>100</span>将不会消失？

（注意：这是我正面临的一个真正问题的简化。在这种情况下，我可以通过在newTemplate变量周围包裹<div ng-controller="Ctrl"></div>来解决这个问题。但是在真正的问题中，我正面临着添加ng-controller div无法解决问题所以请给我一些新的见解）

Answer 1

我不确定为什么会这样，但为什么<span>100</span>包裹着$();？如果删除$();，点击“克隆我克隆我”后仍然会“100”，所以如果不是必需的代码，问题就解决了。

function Ctrl($scope) {
    $scope.variable = '<span>100</span>';
    $scope.variableB = 'String';
}

http://jsfiddle.net/z9XK3/8/

对象在角度模板重新编译时消失

1 个答案: