我在routeProvider模板中有一个自定义标记,用于调用directive模板.该version范围将填充该属性,然后调用正确的模板.
<hymn ver="before-{{ week }}-{{ day }}"></hymn>
这首赞美诗有多个版本,基于它的周和日.我期待使用该指令来填充正确的.html部分.该变量未被读取templateUrl.
emanuel.directive('hymn', function() {
var contentUrl;
return {
restrict: 'E',
link: function(scope, element, attrs) {
// concatenating the directory to the ver attr to select the correct excerpt for the day
contentUrl = 'content/excerpts/hymn-' + attrs.ver + '.html';
},
// passing in contentUrl variable
templateUrl: contentUrl
}
});
有在摘录目录多个文件被标记before-1-monday.html,before-2-tuesday.html...
我有一个form指令,它使用callback带有隔离范围的指定属性:
scope: { callback: '&' }
它位于一个内部,ng-repeat因此我传入的表达式包括id对象作为回调函数的参数:
<directive ng-repeat = "item in stuff" callback = "callback(item.id)"/>
当我完成指令后,它会$scope.callback()从其控制器函数调用.对于大多数情况来说这很好,这就是我想要做的,但有时候我想从内部添加另一个参数directive.
是否有一个允许这样的角度表达式:$scope.callback(arg2)导致callback被调用arguments = [item.id, arg2]？
如果没有,最好的方法是什么？
我发现这有效:
<directive
ng-repeat = "item in stuff"
callback = "callback"
callback-arg="item.id"/>
同
scope { callback: '=', callbackArg: '=' }
和指令调用
$scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) );
但我不认为它特别整洁,它涉及在隔离范围内放置额外的东西.
有没有更好的办法？
这里的Plunker游乐场(打开控制台).
我已经开始了解AngularJS,并且对于ng-app和data-ng-app指令之间的差异感到困惑.
我已经阅读了很多关于在AngularJS中实现自定义指令时使用这些符号的内容,但这个概念对我来说仍然不清楚.我的意思是,如果我在custom指令中使用其中一个范围值,这意味着什么？
var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
return{
restrict:'E',
scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
}
});我们究竟在这里做什么？
我也不确定官方文件中是否存在"范围:'>'".它已在我的项目中使用.
编辑-1
使用"scope:'>'"是我项目中的一个问题,并且已经修复.
我刚开始使用angularjs,我正在努力将一些旧的JQuery插件转换为Angular指令.我想为my(element)指令定义一组默认选项,可以通过在属性中指定选项值来覆盖它.
我已经浏览了其他人的方式,在angular-ui库中,ui.bootstrap.pagination似乎做了类似的事情.
首先,所有默认选项都在常量对象中定义:
.constant('paginationConfig', {
itemsPerPage: 10,
boundaryLinks: false,
...
})
然后将getAttributeValue实用程序函数附加到指令控制器:
this.getAttributeValue = function(attribute, defaultValue, interpolate) {
return (angular.isDefined(attribute) ?
(interpolate ? $interpolate(attribute)($scope.$parent) :
$scope.$parent.$eval(attribute)) : defaultValue);
};
最后,这在链接函数中用于读入属性
.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
...
controller: 'PaginationController',
link: function(scope, element, attrs, paginationCtrl) {
var boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks, config.boundaryLinks);
var firstText = paginationCtrl.getAttributeValue(attrs.firstText, config.firstText, true);
...
}
});
对于想要替换一组默认值的标准内容,这似乎是一个相当复杂的设置.还有其他方法可以做到这一点吗？或者getAttributeValue以这种方式总是定义一个实用程序函数(如和解析选项)是否正常？我很想知道人们对这项共同任务采取了哪些不同的策略.
另外,作为奖励,我不清楚为什么interpolate需要这个参数.
javascript options default-value angularjs angularjs-directive
如何$watch在操作内部数据时触发Angular指令中的变量(例如,插入或移除数据),但不能为该变量分配新对象？
我当前正在从JSON文件加载一个简单的数据集.我的Angular控制器执行此操作,并定义了一些函数:
App.controller('AppCtrl', function AppCtrl($scope, JsonService) {
// load the initial data model
if (!$scope.data) {
JsonService.getData(function(data) {
$scope.data = data;
$scope.records = data.children.length;
});
} else {
console.log("I have data already... " + $scope.data);
}
// adds a resource to the 'data' object
$scope.add = function() {
$scope.data.children.push({ "name": "!Insert This!" });
};
// removes the resource from the 'data' object
$scope.remove = function(resource) {
console.log("I'm going to remove this!");
console.log(resource);
};
$scope.highlight = function() {
}; …我正在构建的应用程序要求我的用户在此图像甚至有可能加载之前设置4条信息.这个图像是应用程序的中心部分,因此破碎的图像链接使整个事物看起来像是被塞住了.我想让另一张图片取代404.
有任何想法吗？我想避免为此编写自定义指令.
我很惊讶我找不到类似的问题,特别是当文档中的第一个问题是同一个问题时!
等号后的问号是否有特殊含义？即:
scope: {foo: '=?'}
如果'foo'无法解决,上述意思是'不引发错误？
我正在使用angularjs编写示例应用程序.我在chrome浏览器上遇到了下面提到的错误.
错误是
错误:[ng:areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined
其中呈现为
参数'ContactController'不是函数,未定义
码
<!DOCTYPE html>
<html ng-app>
<head>
<script src="../angular.min.js"></script>
<script type="text/javascript">
function ContactController($scope) {
$scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
};
}
</script>
</head>
<body>
<h1> modules sample </h1>
<div ng-controller="ContactController">
Email:<input type="text" ng-model="newcontact">
<button ng-click="add()">Add</button>
<h2> Contacts </h2>
<ul>
<li ng-repeat="contact in contacts"> {{contact}} </li>
</ul>
</div>
</body>
</html>
我有一个templateUrl定义的AngularJS指令.我正在尝试用Jasmine进行单元测试.
根据以下建议,我的Jasmine JavaScript如下所示:
describe('module: my.module', function () {
beforeEach(module('my.module'));
describe('my-directive directive', function () {
var scope, $compile;
beforeEach(inject(function (_$rootScope_, _$compile_, $injector) {
scope = _$rootScope_;
$compile = _$compile_;
$httpBackend = $injector.get('$httpBackend');
$httpBackend.whenGET('path/to/template.html').passThrough();
}));
describe('test', function () {
var element;
beforeEach(function () {
element = $compile(
'<my-directive></my-directive>')(scope);
angular.element(document.body).append(element);
});
afterEach(function () {
element.remove();
});
it('test', function () {
expect(element.html()).toBe('asdf');
});
});
});
});
当我在我的Jasmine规范错误中运行它时,我收到以下错误:
TypeError: Object #<Object> has no method 'passThrough'
我想要的是模板加载原型 - 我不想使用respond.我相信这可能与使用ngMock …