Question

我有页面：

<div>111</div><div id="123" ng-init='foo=555'>{{foo}}</div>

浏览器中的

：

111    
555

代码js刷新id = 123并获取新的html。我明白了：

<div id="123" ng-init='foo="444new"'><span>..</span><b>NEW TEXT<b> {{foo}}</div>

浏览器中的

 111
 ...NEW TEXT {{foo}}

我想进入浏览器：

111
...NEW TEXT 444new

在这种情况下是否可以重新运行初始化角度？

DEMO：jsfiddle.net/UwLQR

我的解决方案：http://jsbin.com/iSUBOqa/8/edit - 这个不好的做法！

UPD两个月后：我的上帝，我写的是什么废话。：（

Answer 1

请参阅附带代码和live demo here (click).

中的注释

angular不会注册数据绑定或指令的两个原因是元素未编译，或者更改发生在Angular之外。使用$ compile服务，指令中的compile函数和$scope.$apply是解决方案。请参阅下面的用法。

示例加价：

<div my-directive></div>
<div my-directive2></div>
<button id="bad-button">Bad Button!</button>

示例代码：

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

app.controller('myCtrl', function($scope) {
  $scope.foo = '123!';
  $scope.bar = 'abc!';

  //this is bad practice! just to demonstrate!
  var badButton = document.getElementById('bad-button');
  badButton.addEventListener('click', function() {
    //in here, the context is outside of angular, so use $apply to tell Angular about changes!
    $scope.$apply($scope.foo = "Foo is changed!");   
  });
});

app.directive('myDirective', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      //when using a link function, you must use $compile on the element
      var newElem = angular.element('<div>{{foo}}</div>');
      element.append(newElem);
      $compile(newElem)(scope);
      //or you can use:
      //$compile(element.contents())(scope);
    }

  };
});

app.directive('myDirective2', function($compile) {
  return {
    restrict: 'A',
    compile: function(element, attrs) {
      //compile functions don't have access to scope, but they automatically compile the element
      var newElem = angular.element('<div>{{bar}}</div>');
      element.append(newElem);
    }
  };
});

根据您的评论进行更新

这让我很难写这个，但这是你需要使代码工作的。

var elem = document.getElementById('123');
elem.innerHTML = "<div ng-init=\"foo='qwe123'\">{{foo}}</div>";
$scope.$apply($compile(elem)($scope));

就像我说的那样，你需要编译元素AND，因为那是在一个事件监听器中，你也需要使用$apply，这样Angular就会知道你正在做的编译。 / p>

那就是说，如果你正在做这样的事情，你真的需要更多地了解角度。任何类似的事情都应该通过指令来完成，而且不要使用任何直接的DOM操作。

Answer 2

尝试下一步：

$scope.$apply(function() {
  // your js updates here..
});

或

$compile('your html here')(scope);

在页面底部查看$compile example。

更新DOM时重新启动初始化角度

2 个答案:

根据您的评论进行更新