我的指令只有在我的承诺得到解决后才能呈现其内容,我遇到了问题.我以为then()应该这样做但它似乎没有工作..
这是我的控制器:
// Generated by CoffeeScript 1.6.3
(function() {
var sprangularControllers;
sprangularControllers = angular.module('sprangularControllers', ['sprangularServices', 'ngRoute']);
sprangularControllers.controller('productsController', [
'$scope', '$route', '$routeParams', 'Product', 'Taxonomy', function($scope, $route, $routeParams, Product, Taxonomy) {
Taxonomy.taxonomies_with_meta().$promise.then(function(response) {
return $scope.taxonomies = response.taxonomies;
});
return Product.find($routeParams.id).$promise.then(function(response) {
return $scope.currentProduct = response;
});
}
]);
}).call(this);
我的指示:
// Generated by CoffeeScript 1.6.3
(function() {
var sprangularDirectives;
sprangularDirectives = angular.module('sprangularDirectives', []);
sprangularDirectives.directive('productDirective', function() {
return {
scope: {
product: '='
},
templateUrl: 'partials/product/_product.html',
link: function(scope, el, attrs) { …我是一个有角度的新蜜蜂.我正在尝试编写一个验证,在用户尝试关闭浏览器窗口时提醒用户.
我的页面v1和v2上有2个链接.当点击指向特定页面的链接时.这是重定向到v1和v2的代码
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/v1', {templateUrl: 'pages/v_1.html', controller: MyCtrl1});
$routeProvider.when('/v2', {templateUrl: 'pages/v_2.html', controller: MyCtrl2});
$routeProvider.otherwise({redirectTo: '/v1'});
}]);
当用户点击v1"他即将离开v1,如果他想继续"并且点击v2时,我想弹出一条消息.任何关于如何实现这一点的指示将不胜感激.
更新的代码;
控制器
function MyCtrl1() {
$scope.$on('$locationChangeStart', function (event, next, current) {
if ('your condition') {
event.preventDefault();
MessageService.showConfirmation(
'Are you sure?',
MessageService.MessageOptions.YES_NO, {
'YES': function () {
blockNavigation = false;
$location.url($location.url(next).hash());
$rootScope.$apply();
},
'NO': function () {
MessageService.clear();
$log.log('NO Selected')
}
});
}
});
}
MyCtrl1.$inject = [];
function MyCtrl2() {}
MyCtrl2.$inject = …javascript model-view-controller angularjs angularjs-directive
我正在尝试使用angular-ui的工具提示功能向我的用户显示特定字段无效但似乎工具提示只能在某些预定义的触发器上显示.除了那些触发器之外,我有什么办法可以触发工具提示吗？
例如:
<input
type="text"
tooltip="Invalid name!"
tooltip-position="right"
tooltip-trigger="myForm.username.$invalid">
我目前正在声明相对于当前窗口位置的templateUrl.
cvApp.directive('personalDetails', function () {
return {
restrict: 'A',
templateUrl: '../../Scripts/app/templates/personalDetails.html'
};
});
如何相对于应用程序的根目录创建templateUrl？我正在寻找这样的东西:
templateUrl: '~/Scripts/app/templates/personalDetails.html'
AngularJS可以做到这一点吗？
我是angularjs的新手.我想知道只允许在文本框中输入有效数字的方法是什么.例如,用户可以输入"1.25",但不能输入"1.a"或"1 ..".当用户尝试输入将使其成为无效数字的下一个字符时,他无法输入.
提前致谢.
我试图使用ng-pattern指令验证angularJs中的电子邮件ID字段.
但我是AngularJs的新手.一旦用户输入错误的电子邮件ID,我就需要显示错误消息.
我下面的代码是试图解决的.帮助我使用ng-pattern来获得正确的结果.
<script type="text/javascript" src="/Login/script/ang.js"></script>
<script type="text/javascript">
function Ctrl($scope) {
$scope.text = 'enter email';
$scope.word = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
}
</script>
</head>
<body>
<form name="myform" ng-controller="Ctrl">
<input type="text" ng-pattern="word" name="email">
<span class="error" ng-show="myform.email.$error.pattern">
invalid email!
</span>
<input type="submit" value="submit">
</form>
</body>
我正在做一个小项目来玩围绕ES6带来的好东西,我正在尝试将一个类设置为一个角度指令,但我遇到了这个错误"TypeError:不能将一个类称为函数"但是从示例中我发现他们只是编写类并将其作为指令注册角色.这是我的指示.
class dateBlock {
constructor () {
this.template = '/app/dateblock/dateblock.html';
this.restrict = 'AE';
this.scope = {};
}
};
export default dateBlock
和我的索引,我导入它,然后声明它.
import calendarController from './calendar/calendar.js'
import dateBlock from './dateblock/dateblock.js'
function setup($stateProvider) {
$stateProvider
.state('base', {
url: '',
controller: calendarController,
templateUrl: '/app/calendar/calendar.html'
});
};
setup.$inject = ['$stateProvider']
var app = angular.module('calApp',['ngAnimate','ui.router','hmTouchEvents', 'templates'])
.config(setup)
.controller('calendarController', calendarController)
.directive('dateBlock', dateBlock)
如果我错过了一些关键的步骤,我很乐意听到它.另外一个问题是,将所有应用程序组件导入索引并在那里注册它们或导出应用程序并导入和注册组件更清晰吗？
关于如何在ngRepeat指令中实现项目删除有很多问题,正如我所知,它归结为使用ngClick并触发一些删除函数传递项目的$ index.
但是,我找不到任何有多个ngRepeats的示例:
<div ng-controller="MyController">
<div ng-repeat="email in user.emails">
{{ email }} <a href>Remove</a>
</div>
<div ng-repeat="phone in user.phones">
{{ phone }} <a href>Remove</a>
</div>
</div>
为此,我需要创建$ scope.removePhone和$ scope.removeEmail,这将使用ngClick on Remove anchor来调用.但我正在寻找更通用的解决方案.特别是因为我有很多页面有很多ngRepeats.
我正在考虑编写一个可以放在Remove锚点上的指令,并且会做类似这样的事情:
所以标记看起来像这样:
<div ng-controller="MyController">
<div ng-repeat="email in user.emails">
{{ email }} <a href remove-directive="$index">Remove</a>
</div>
<div ng-repeat="phone in user.phones">
{{ phone }} <a href …我正在努力理解模型的范围及其对范围有限的指令的约束.
我认为限制指令的范围意味着控制器.$ scope和directive.scope不再是同一个东西.但是,我对如何在指令模板或html中放置模型影响数据绑定感到困惑.我觉得我缺少一些非常基础的东西,继续前进我需要理解这一点.
请使用以下代码(在此处小提琴:http://jsfiddle.net/2ams6/)
JavaScript的
var app = angular.module('app',[]);
app.controller('Ctrl',function($scope){
});
app.directive('testel', function(){
return {
restrict: 'E',
scope: {
title: '@'
},
transclude: true,
template: '<div ng-transclude>'+
'<h3>Template title: {{title}}</h3>' +
'<h3>Template data.title:{{data.title}}</h3>' +
'</div>'
}
});
HTML
<div ng-app='app'>
<div ng-controller="Ctrl">
<input ng-model="data.title">
<testel title="{{data.title}}">
<h3>Transclude title:{{title}}</span></h3>
<h3>Transclude data.title:{{data.title}}</h3>
</testel>
</div>
</div>
模型仅{{title}}在模板内和翻译{{data.title}}中更新.为什么不在翻译{{title}}中也不{{data.title}}在模板中？
将输入移动到translude中就像这样(在这里小提琴:http://jsfiddle.net/eV8q8/1/):
<div ng-controller="Ctrl">
<testel title="{{data.title}}">
<input ng-model="data.title">
<h3>Transclude title: …angularjs ×10
javascript ×6
angular-ui ×1
class ×1
ecmascript-6 ×1
email ×1
ng-pattern ×1
regex ×1