Javascript, angularjs，可以动态插入ng-mouseover

Javascript, angularjs, can a ng-mouseover be inserted dynamically?

本文关键字：插入 ng-mouseover 动态 angularjs Javascript      更新时间：2023-09-26

这段代码显然不起作用:

var run_div = document.createElement('div');
run_div.className = 'whatever';
run_div.textContent = 'whatever';
run_div.setAttribute('ng-mouseover', 'console.log(''ei'')');
document.getElementById('main_div').appendChild(run_div);

我猜这是因为ng-mouseover必须从一开始就存在，以便AngularJS知道(?)。是这样吗?有什么办法可以做到吗?

(下面:UPDATE 1, UPDATE 2, UPDATE 3)

UPDATE 1:
这段代码在工厂中工作，我从控制器调用工厂方法发送$scope:

angular.module('whatever').controller('mycontroller', 
['$scope', '$q', '$window', '$timeout',
function ($scope, $q, $window, $timeout) {
$scope.myfunction= function() {
  myfactory.mymethod($scope);
};

工厂在其定义中调用$compile:

angular.module('whatever').factory('myfactory', 
['$window', '$q', '$compile',
function($window, $q, $compile) {

…

mymethod = function($scope) {
    var run_div = document.createElement('div');
    run_div.className = 'whatever';
    run_div.textContent = 'whatever';
    run_div.setAttribute('ng-mouseover', 'console.log(''ei'')');
    document.getElementById('main_div').appendChild(run_div);
}

不起作用，然后抛出一个错误:

document.getElementById('main_div').appendChild($compile(run_div)($scope));
document.getElementById('main_div').appendChild($compile(run_div)($scope.new()));

甚至:

var run_div = angular.element(document.createElement('div'));
run_div.addClass('whatever');
run_div.attr('ng-mouseenter', 'console.log(''ei''');
document.getElementById('main_div').appendChild($compile(run_div)($scope));

，它抱怨当追加时，参数不是一个节点。

Uncaught (in promise) TypeError: Failed to execute 'appendChild' on 'Node':参数1不是'Node'类型。(…)

更新2:

下面的代码显示(我认为)，当编译和从工厂追加它不工作，但当做它从控制器，它的工作(见答案2):

http://jsfiddle.net/xsaudasp/1/

更新3

我可以看到这必须工作，如下所示: http://jsfiddle.net/2uk2qe92/4/

首先，你需要为你的指令创建一个新的$scope实例，然后使用$compile服务来编译给定的div范围:

var directiveScope = $scope.$new();
var compiledDirective = $compile(run_div)(directiveScope);

然后你可以把它附加到DOM:

angular.element('#my_dir').append(compiledDriective);

你必须确保jQuery在angular之前被加载，这样jQuery选择器才可用。如果你不想使用jQuery，你可以使用jqLite选择器:

angular.element(document.querySelector('#my_dir')).append(compiledDirective)

这里是您需要的工作jsfiddle: jsfiddle

您需要在将run_div插入DOM之前编译它:

只需这样使用$compile服务:

document.getElementById('main_div').appendChild($compile(run_div)($scope));

你应该考虑使用指令，但在你的控制器中操纵DOM是不建议的。

编辑1:

创建一个指令:

.directive('myShinyElement', function() {
  return {
    restrict: 'E',
    scope: {
      text: '='
    },
    template '<div class="whatever" ng-mouseover="mouseOver()">{{text}}</div>',
    link: function(scope, element, attrs, tabsCtrl) {
       scope.mouseOver = function(){
          console.log('mouseover');
       }
    }
  };
});

并在你的html中使用:

<my-shiny-element text="Dataset.analysis[$index].dataset.name"> </my-shiny-element>
相关文章：