在AngularJS中创建元素时如何在元素上执行外部函数？
[英]How to execute external function on element when it is created in AngularJS?
问题描述
当我在AngularJS中创建项目时，我想在每个项目上从外部库运行一些功能。 我该怎么办？ 您可以在下面查看我的应用程序代码。
var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.blocks = [ {name: 'item #1'}, {name: 'item #2'} ]; });
<script src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script> <script> // this function is provided by external library // I want to setup each block in ng-repeat // it manipulated DOM function setupBlock(elm, name) { elm.innerHTML = name + ' [ready]'; } </script> <body ng-controller="MainCtrl" ng-app="app"> <div ng-repeat="block in blocks">{{block.name}}</div> </body>
3 个解决方案
解决方案1
1 已采纳 2015-05-16 12:12:35
创建一个使用参数name的指令：
.directive('myDirective', function() {
return {
restrict: 'A',
scope: {
name: '='
},
link: function(scope, elm, attrs) {
// Call your function here!
elm[0].innerHTML = scope.name;
}
}
})
在此处查看完整的示例： http : //plnkr.co/edit/3SOWZrRHOldMRUEl7l0Z
注意：当需要进行DOM操作时，请始终使用指令！
编辑：要将整个对象传递给指令，请重写它的scope对象：
scope: {
block: '=data'
}
并在您的ng-repeat标记中：
<div ng-repeat="block in blocks" my-directive data="block"></div>
解决方案2
1 2015-05-16 12:16:10
您可以使用$ rootScope
[1]： https : //docs.angularjs.org/api/ng/service/ $ rootScope“
[2]： http : //toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/
例如在JS中：
(function() {
var global;
global = (function() {
function global($rootScope) {
$rootScope.view_directory = "something";
}
return global;
})();
angular.module('yourapplication').run(['$rootScope', global]);
}).call(this);
例如在coffeescript（ngClassify）中：
class global extends Run
constructor: ($rootScope) ->
$rootScope.view_directory = "something"
解决方案3
1 2015-05-16 12:34:15
回答我自己的问题。 完整的工作代码段。 根据接受的答案。
var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.blocks = [ {name: 'item #1'}, {name: 'item #2'} ]; }).directive('externalBlock', function() { return { restrict: 'A', scope: { block: '=data' }, link: function(scope, elm, attrs) { setupBlock(elm[0], scope.block); } } });
<script src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script> <script> // this function is provided by external library // I want to setup each block in ng-repeat // it manipulated DOM function setupBlock(elm, block) { elm.innerHTML = block.name + ' [ready]'; } </script> <body ng-controller="MainCtrl" ng-app="app"> <div ng-repeat="block in blocks" external-block data="block"></div> </body>
创建具有特定 css 的 div 时如何执行函数？
[英]How can I execute a function when a div with a particular css is created?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.