jquery - AngularJS registering DOM elements when added from outside Angular

Question

I have a scenario where I have to add DOM elements using jQuery. But the application I'm working on is developed with angular and I need those elements accessible in Angular. Example Scenario:

function addElement(){
    $('body').append('<div id="outsideDiv" data-ng-click="callFn()">Added from outside angular.</div>')
}
angular.module('myApp',[]).controller('someController',function($scope){
    addElement();
    $scope.callFn = function(){
      console.log("Function Called");
    }
});

I have a similar scenario. How can I access "#outsideDiv" and how my click function will get called? Is there a way to make angular walk the DOM manually and register newly added elements?

Answer 1

尝试使用 ng-show=somename 。当您想显示 html 时，将其更改为 $scope.somename = true; 当你想隐藏它时，在角度控制器中将其更改为 $scope.somename = false

Answer 2

在 Angular 中，最好的做法是在修改 html 时使用指令（使用 jquery 等）

指令

在您的情况下，我将添加一个指令，该指令将是一个简单的元素，其 dom 将被您的新 html 替换。您可以通过新指令添加事件、函数和您需要的所有内容。