我們的角度來認識一個新的HTML元素已經建立

我創建了一個新的（第二格）HTML元素通過動態下面的代碼：我們的角度來認識一個新的HTML元素已經建立

var body = document.getElementsByTagName('body')[0]; 
var container = document.createElement('div'); 
var node = document.createTextNode('Hello, {{ name }}'); 
container.appendChild(node); 
body.appendChild(container);

添加，我的index.html像這樣：

<html ng-app> 
<body> 
<div> 
Hello, {{ name }} 
</div> 
</body> 
</html>

那麼，第一個Hello, {{name}}效果不錯，它顯示Hello,World。但第二個Hello, {{name}}，只顯示<div>Hello, {{name}}</div>，我如何讓角度知道我創造了一個新的元素，並讓它來解釋價值？

來源

2015-07-13 zhaokun

真的，你不應該這樣做。這不是框架的工作原理。在視圖中使用ng-repeat，可以在模型中的數組上進行操作。要創建一個新的HTML元素，只需將一個對象添加到模型中的數組中，角度將在視圖中添加相應的HTML元素。 –

使用指令而不使用DOM操作，然後你可以觀察屬性並完成 – sbaaaang

正確的方式做，這是使用$編譯服務。

從普拉克：http://plnkr.co/edit/zijB2HM8OSblvmuu1jn9?p=preview

app.controller('MainCtrl', function($scope, $compile, $document) { 
    $scope.name = 'World'; 
    var d; 
    $scope.add = function() { 
    var document = $document[0]; 
    var node = document.createTextNode('Hello Sweet {{name}}'); 
    var el = $compile(node)($scope); 
    if(!d) { 
     d = $document.find('div'); 
    } 
    console.log('l=',d.length); 
    d.append(el); 
    }; 
});

來源

2015-07-13 09:48:19 deostroll

這是由於角度的延遲加載。而不是直接結合的模式，你可以調用一個函數

var body = document.getElementsByTagName('body')[0]; 
var container = document.createElement('div'); 
var node = document.createTextNode('Hello, {{ myFoo()}}'); 
container.appendChild(node); 
body.appendChild(container);

，並在控制器中定義myFoo這樣

$scope.myFoo = function(){ 
    return "My Custom Text"; 
}

來源

2015-07-13 08:51:28 blue

我可以建議你下面的答案，更多的是angularjs的想法。在JS方面，創建一個數組，其中包含要顯示的名稱以及是否要添加更新數據的新函數。

在HTML方面，只需使用ng-repeat指令來打印您的名字。

<html ng-app='myapp'> 
    <body> 
    <div ng-controller='ctrl'> 
     <ul ng-repeat="name in names"> 
      <li> Hello {{name}} </li> 
     </ul> 
    </div> 
    </body> 
    </html> 

<script> 
     var app = angular.module('myapp',[]); 

     app.controller('ctrl', function($scope) { 


      $scope.names = ["foo","bar"]; 

     }); 
</script>

另外，我給的jsfiddle - >https://jsfiddle.net/xjtmp27u/

來源

2015-07-13 08:58:05 alifirat

我們的角度來認識一個新的HTML元素已經建立

回答

相關問題