0

このフィドルをチェックしてください：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'));
            });
        }
    };
}]);

「Clone me Clone me link」をクリックしてみてください

元のテンプレートで<span>100</span>は、文字列 'String' は引き続き表示されるのに対し、オブジェクトであるため が表示されないことに注意してください。

なぜこうなった？さらに、「Clone me Clone me」リンクをクリックするとオリジナル<span>100</span>が消えないようにするにはどうすればよいですか?

（注：これは私が直面している実際の問題を単純化したものです。この場合<div ng-controller="Ctrl"></div>、newTemplate変数をラップすることでこれを解決できます。しかし、私が直面している実際の問題では、ng-controller divを追加しても解決されません問題があるので、新しい洞察を教えてください）

4

1 に答える 1

1

なぜそれが起こっているのかわかりませんが、なぜあなたは<span>100</span>でラップしたの$();ですか? 削除すると「Clone me Clone me」をクリックした後に「100」が残る$();ので、それが不要なコードであれば問題は解決します。

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

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

于 2013-04-08T02:33:17.860 に答える