數據綁定使用後不工作「的appendChild（）」中增加新元素

當我這樣寫，角度作品：數據綁定使用後不工作「的appendChild（）」中增加新元素

<html ng-app="mptmanager" class="ng-scope"> 
    <body> 
     <input ng-model = "test" /><br /> 
     {{test}} 
    </body> 
</html> 
<script src="js/angular.min.js"></script> 
<script src="angular/angularModules.js"></script>

但是當我運行JS代碼：

var temp = document.createElement('div'); 
temp.innerHTML = '<input ng-model = "test2"><br />{{test2}}'; 
document.body.appendChild(temp);

角有新的元素沒有影響，所以我只能看到「{{測試2}}」我的網頁上...

我怎樣才能使角工作時，我嘗試添加或更改某個元素我的頁面與JS？

來源

2014-02-08 Maplemx

你應該看看角指令，這是使DOM修改的地方 – Dan

使用Angular時，不應該在指令外進行DOM操作。爲了完整起見，我會告訴你如何完成這項工作。只需注入$compile服務並使用範圍編譯新的標記。

var app = angular.module('myApp', []); 

app.controller('myCtrl', function($scope, $compile) { 
    $scope.foo = 'Default value'; 

    var elem = document.createElement('div'); 
    elem.innerHTML = '<input ng-model="foo">{{foo}}'; 
    document.body.appendChild(elem); 
    $compile(elem)($scope); 
});

下面是使用指令正確方法：

<div my-directive></div> 
<div my-directive2></div>

的JavaScript：

app.directive('myDirective', function() { 
    return { 
    template: '<input ng-model="foo">{{foo}}' 
    }; 
}); 

app.directive('myDirective2', function() { 
    return { 
    compile: function(element) { 
     element.html('<input ng-model="foo">{{foo}}'); 
    } 
    }; 
});

在你的指令，如果你使用的link功能，它可以訪問scope ，你將不得不手動$compile噸他標記如上所示，但要小心避免無限循環。你通常會這樣做：$compile(element.contents())(scope);如果你編譯元素本身，你會創建一個無限循環。

Live demos (click).

來源

2014-02-09 01:03:26 m59

正如dskh簡單提到的那樣，directives被用來做Angular中的那種東西。

這裏的問題是角不知道關於新元素，因爲添加它的例程生活在Angular範圍之外。您可以手動撥打$scope.$apply()，但我不會考慮這種最佳做法。

來源

2014-02-08 12:01:53 Sprottenwels

數據綁定使用後不工作「的appendChild（）」中增加新元素

回答

相關問題