我有一个有自己的控制器的指令.请参阅以下代码:
var popdown = angular.module('xModules',[]);
popdown.directive('popdown', function () {
var PopdownController = function ($scope) {
this.scope = $scope;
}
PopdownController.prototype = {
show:function (message, type) {
this.scope.message = message;
this.scope.type = type;
},
hide:function () {
this.scope.message = '';
this.scope.type = '';
}
}
var linkFn = function (scope, lElement, attrs, controller) {
};
return {
controller: PopdownController,
link: linkFn,
replace: true,
templateUrl: './partials/modules/popdown.html'
}
});
这是一个错误/通知/警告的通知系统.我想要做的是从另一个控制器(而不是指令控制器)调用show该控制器上的函数.当我这样做时,我还希望我的链接功能检测到某些属性已更改并执行一些动画.
这里有一些代码来举例说明我的要求:
var app = angular.module('app', ['RestService']);
app.controller('IndexController', function($scope, RestService) {
var …我有一个文字输入.当输入获得焦点时,我想选择输入内的文本.
使用jQuery我会这样做:
<input type="text" value="test" />
$("input[type=text]").click(function() {
$(this).select();
// would select "test" in this example
});
我一直在寻找尝试找到Angular的方法,但我发现的大多数例子都是在处理一个正在观察变化的模态属性的指令.我假设我需要一个正在观察获得焦点的输入的指令.我该怎么办？
使用Angularjs,我需要显示一个加载屏幕(一个简单的微调器),直到ajax请求完成.请使用代码段建议任何想法.
我想对第三方指令(特别是Angular UI Bootstrap)做一个小修改.我只想添加到pane指令的范围:
angular.module('ui.bootstrap.tabs', [])
.controller('TabsController', ['$scope', '$element', function($scope, $element) {
// various methods
}])
.directive('tabs', function() {
return {
// etc...
};
})
.directive('pane', ['$parse', function($parse) {
return {
require: '^tabs',
restrict: 'EA',
transclude: true,
scope:{
heading:'@',
disabled:'@' // <- ADDED SCOPE PROPERTY HERE
},
link: function(scope, element, attrs, tabsCtrl) {
// link function
},
templateUrl: 'template/tabs/pane.html',
replace: true
};
}]);
但我也想让Angular-Bootstrap与Bower保持同步.我一跑bower update,就会覆盖我的变化.
那么我该如何将这个指令与这个凉亭组件分开扩展呢？
javascript angularjs bower angularjs-directive angular-ui-bootstrap
我有一个输入,可以在更改时过滤ng-repeat列表.重复包含大量数据,需要几秒钟来过滤所有内容.在开始过滤过程之前,我希望它们延迟0.5秒.角度创建此延迟的正确方法是什么？
输入
<input ng-model="xyz" ng-change="FilterByName()" />
重复
<div ng-repeat"foo in bar">
<p>{{foo.bar}}</p>
</div>
过滤功能
$scope.FilterByName = function () {
//Filtering Stuff Here
});
谢谢
我正试图从我的Angular.js应用程序中删除jquery以使其更轻,并改为使用Angular的jqLite.但该应用程序大量使用find('#id')和find('.classname'),jqLite不支持,只有'标签名称'(根据文档)
想知道你认为改变它的最佳方法是什么.我想到的一种方法是创建自定义HTML标记.例如:改变
<span class="btn btn-large" id="add-to-bag">Add to bag</span>
至
<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>
和
$element.find('#add-to-bag')
至
$element.find('a2b')
有什么想法吗？其他想法？
谢谢
利奥尔
我有两个控制器,并使用app.factory函数在它们之间共享数据.
第一个控制器在单击链接时在模型数组(pluginsDisplayed)中添加一个小部件.小部件被推入阵列,此更改将反映到视图中(使用ng-repeat显示数组内容):
<div ng-repeat="pluginD in pluginsDisplayed">
<div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>
该小部件基于三个指令构建,k2plugin,remove和resize.remove指令将span添加到k2plugin指令的模板中.单击所述span时,将删除共享数组中的右元素Array.splice().共享阵列已正确更新,但更改未反映在视图中.但是,添加另一个元素后,在删除后,视图将正确刷新,并且不会显示先前删除的元素.
我错了什么？你能解释一下为什么这不起作用吗？有没有更好的方法来做我想用AngularJS做的事情？
这是我的index.html:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
</script>
<script src="main.js"></script>
</head>
<body>
<div ng-app="livePlugins">
<div ng-controller="pluginlistctrl">
<span>Add one of {{pluginList.length}} plugins</span>
<li ng-repeat="plugin in pluginList">
<span><a href="" ng-click="add()">{{plugin.name}}</a></span>
</li>
</div>
<div ng-controller="k2ctrl">
<div ng-repeat="pluginD in pluginsDisplayed">
<div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>
</div>
</div>
</body>
</html>
这是我的main.js:
var app = angular.module ("livePlugins",[]);
app.factory('Data', function () {
return {pluginsDisplayed: []};
});
app.controller ("pluginlistctrl", function ($scope, …angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
我想创建一个链接到属性的指令.该属性指定应在作用域上调用的函数.但我也想将一个参数传递给在link函数中确定的函数.
<div my-method='theMethodToBeCalled'></div>
在链接函数中,我绑定到一个jQuery事件,该事件传递一个我需要传递给函数的参数:
app.directive("myMethod",function($parse) {
restrict:'A',
link:function(scope,element,attrs) {
var expressionHandler = $parse(attrs.myMethod);
$(element).on('theEvent',function( e, rowid ) {
id = // some function called to determine id based on rowid
scope.$apply(function() {expressionHandler(id);});
}
}
}
app.controller("myController",function($scope) {
$scope.theMethodToBeCalled = function(id) { alert(id); };
}
如果没有传递id,我可以使它工作,但是一旦我尝试传递参数,该函数就不再被调用了