Angular中的所有元素引用始终用jQuery或jqLite包装; 它们永远不是原始的DOM引用.
我如何获得原始DOM元素,因为我有需要原始DOM元素的遗留JS代码(jscolor Picker)？
我试图从我的链接功能中查看我的模型值.
scope.$watch(attrs.ngModel, function() {
console.log("Changed");
});
当我更改控制器内的模型值时,不会触发$ watch函数.
$scope.myModel = "ACT";
$timeout(function() {
$scope.myModel = "TOTALS";
}, 2000);
小提琴:http://jsfiddle.net/dkrotts/BtrZH/4/
我在这里错过了什么？
如何在AngularJS表单元素内的输入字段中自动调整第一个字符的资本？
我已经看到了jQuery解决方案,但是相信在AngularJS中必须通过使用指令来完成.
是否可以"观察"指令的ui变化？类似的东西:
.directive('vValidation', function() {
return function(scope, element, attrs) {
element.$watch(function() {
if (this.hasClass('someClass')) console.log('someClass added');
});
}
})
如何使用指令方法启用/禁用锚标记？
例:
JAVASCRIPT:
angular.module('ngApp', []).controller('ngCtrl',['$scope', function($scope){
$scope.create = function(){
console.log("inside create");
};
$scope.edit = function(){
console.log("inside edit");
};
$scope.delete = function(){
console.log("inside delete");
};
}]).directive('a', function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
elem.on('click', function(e){
e.preventDefault();
if(attrs.ngClick){
scope.$eval(attrs.ngClick);
}
});
}
}
};
});
我使用"draggable"指令来支持图像拖动.但是,根据用户的角色,我需要禁用某些用户组的图像拖动.我使用了以下代码.
<!--draggable attribute is used as handle to make it draggable using jquery event-->
<li ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box">
<!-- Images and other fields are child of "li" tag which can be dragged.-->
</li>
该方法dragSupported在模板范围内并返回true或false.我不想<li>通过使用ng-iffor返回的每个值来创建两个大的重复元素dragSupported().换句话说,我不是在寻找以下方法来解决这个问题.
<!--draggable attribute is used as handle to make it draggable using jquery event-->
<li ng-if="dragSupported() ==true" ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box">
<!-- Images and other fields are child …我想知道这个片段的工作方式是什么:
//html
<div ng-app="app">
<div ng-controller="AppCtrl">
<a my-dir ng-repeat="user in users">{{user.name}}</a>
</div>
</div>
//js
var app = angular.module('app', []);
app.controller("AppCtrl", function ($scope) {
$scope.users = [{name:'John',id:1},{name:'anonymous'}];
$scope.fxn = function() {
alert('It works');
};
})
app.directive("myDir", function ($compile) {
return {
link:function(scope,el){
el.attr('ng-click','fxn()');
//$compile(el)(scope); with this the script go mad
}
};
});
我知道这是关于编译阶段的,但我不明白这一点,所以简短的解释会非常感激.
目前正在开展一个项目,当我们发现大量内存泄漏时,不清除已销毁范围内的广播订阅.以下代码修复了此问题:
var onFooEventBroadcast = $rootScope.$on('fooEvent', doSomething);
scope.$on('$destroy', function() {
//remove the broadcast subscription when scope is destroyed
onFooEventBroadcast();
});
这种做法是否也应该用于手表？代码示例如下:
var onFooChanged = scope.$watch('foo', doSomething);
scope.$on('$destroy', function() {
//stop watching when scope is destroyed
onFooChanged();
});
目前,我的应用程序有一个控制器,它接收一个JSON文件,然后使用"ng-repeat"迭代它们.这一切都很好,但我也有一个需要迭代相同JSON文件的指令.这是一个问题,因为我不能在一个页面上两次请求相同的JSON文件(我也不想,因为它效率低).如果我更改其中一个JSON文件的文件名,指令和控制器请求并迭代JSON数据就好了.
我想知道的是:将控制器的JSON请求形成的数组传递给指令的最佳方法是什么？当我已经通过我的控制器访问它时,如何将数组传递给我的指令并进行迭代？
调节器
appControllers.controller('dummyCtrl', function ($scope, $http) {
$http.get('locations/locations.json').success(function(data) {
$scope.locations = data;
});
});
HTML
<ul class="list">
<li ng-repeat="location in locations">
<a href="#">{{location.id}}. {{location.name}}</a>
</li>
</ul>
<map></map> //executes a js library
指令(当我使用除locations.json之外的文件名时工作,因为我已经请求过一次
.directive('map', function($http) {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function(scope, element, attrs) {
$http.get('locations/locations.json').success(function(data) {
angular.forEach(data.locations, function(location, key){
//do something
});
});
javascript json angularjs angularjs-directive angularjs-ng-repeat
我为对话框(myPopup)写了一个指令,另一个用于拖动这个对话框(myDraggable),但我总是得到错误:
要求新/隔离范围的多个指令[myPopup,myDraggable]
这是一个Plunker:http://plnkr.co/edit/kMQ0hK5RnVw5xOBdDq5P？p = preview
我能做什么？
JS代码:
var app = angular.module('myApp', []);
function myController($scope) {
$scope.isDraggable = true;
}
app.directive('myPopup', [
function () {
"use strict";
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div my-draggable="draggable"class="dialog"><div class="title">{{title}}</div><div class="content" ng-transclude></div></div>',
scope: {
title: '@?dialogTitle',
draggable: '@?isDraggable',
width: '@?width',
height: '@?height',
},
controller: function ($scope) {
// Some code
},
link: function (scope, element, attr) {
if (scope.width) {
element.css('width', scope.width);
}
if (scope.height) {
element.css('height', scope.height);
}
} …