我试图从我的自定义指令获取一个评估属性,但我找不到正确的方法.
我已经创建了这个jsFiddle来详细说明.
<div ng-controller="MyCtrl">
<input my-directive value="123">
<input my-directive value="{{1+1}}">
</div>
myApp.directive('myDirective', function () {
return function (scope, element, attr) {
element.val("value = "+attr.value);
}
});
我错过了什么？
我正在尝试创建一个指令,该指令将使用与创建指令的元素相同的ng-model创建输入字段.
这是我到目前为止所提出的:
HTML
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
This scope value <input ng-model="name">
<my-directive ng-model="name"></my-directive>
</body>
</html>
JavaScript的
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "Felipe";
});
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
scope: {
ngModel: '='
},
template: '<div class="some"><label for="{{id}}">{{label}}</label>' +
'<input id="{{id}}" ng-model="value"></div>',
replace: true,
require: 'ngModel',
link: function($scope, …我得到了:
找不到类型或命名空间名称
VS2010中的C#WPF应用程序出错.这段代码编译得很好,但突然间我收到了这个错误.我已经尝试删除项目参考和using声明,关闭VS2010并重新启动,但我仍然有这个问题.
任何想法为什么会发生这种情况,看起来我正在做正确的事情参考和using陈述？
我还在VS2010中注意到该命名空间的intellisense工作正常,所以看起来VS2010有项目引用并且一方面看到命名空间,但是在编译期间看不到它？
我想要实现的基本上是"on ng repeat finished rendering"处理程序.我能够检测到它何时完成,但我无法弄清楚如何从中触发一个功能.
检查小提琴:http://jsfiddle.net/paulocoelho/BsMqq/3/
JS
var module = angular.module('testApp', [])
.directive('onFinishRender', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
element.ready(function () {
console.log("calling:"+attr.onFinishRender);
// CALL TEST HERE!
});
}
}
}
});
function myC($scope) {
$scope.ta = [1, 2, 3, 4, 5, 6];
function test() {
console.log("test executed");
}
}
HTML
<div ng-app="testApp" ng-controller="myC">
<p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p>
</div>
答案:来自finishmove的工作小提琴:http …
我有这个简单的场景:
输入元素,其值由jQuery的val()方法更改.
我试图用jQuery设置的值更新角度模型.我试着编写一个简单的指令,但它并没有按照我的意愿行事.
这是指令:
var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
return function(scope, element, attrs) {
element.bind('change', function() {
console.log('value changed');
})
}
})
这是jQuery的一部分:
$(function(){
$('button').click(function(){
$('input').val('xxx');
})
})
和HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input test-change ng-model="foo" />
<span>{{foo}}</span>
</div>
</div>
<button>clickme</button>
这是我尝试的小提琴:http:
//jsfiddle.net/U3pVM/743/
有人可以指点我正确的方向吗？
我有一个属性指令限制如下:
restrict: "A"
我需要传递两个属性; 数字和函数/回调,使用该attrs对象在指令中访问它们.
如果指令是一个元素指令,那么"E"我可以限制:
<example-directive example-number="99" example-function="exampleCallback()">
但是,由于我不会进入的原因,我需要将指令作为属性指令.
如何将多个属性传递给属性指令？
这里发生了什么？
这是我的指示:
app.directive('submitRequired', function (objSvc) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
// do something
}
};
});
以下是使用中的指令示例:
<input submit-required="true"></input>
这是实际的错误文本:
Error: [$compile:ctreq] Controller 'ngModel', required by directive 'submitRequired', can't be found!
http://errors.angularjs.org/1.2.2/$compile/ctreq?p0=ngModel&p1=submitRequired
at http://www.domain.ca/Scripts/angular/angular.js:78:12
at getControllers (http://www.domain.ca/Scripts/angular/angular.js:5972:19)
at nodeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:6139:35)
at compositeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5550:15)
at nodeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:6132:24)
at compositeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5550:15)
at publicLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5458:30)
at http://www.domain.ca/Scripts/angular/angular.js:1299:27
at Scope.$get.Scope.$eval (http://www.domain.ca/Scripts/angular/angular.js:11634:28)
at Scope.$get.Scope.$apply (http://www.domain.ca/Scripts/angular/angular.js:11734:23) <input submit-required="true"> angular.js:9159
(anonymous function) angular.js:9159
$get angular.js:6751
nodeLinkFn angular.js:6141
compositeLinkFn angular.js:5550
nodeLinkFn …我刚开始使用Angular 2.
我想知道Angular 2中的组件和指令之间有什么区别？
我通过Angular CLI生成了新的@Directive,它被导入我的app.module.ts
import { ContenteditableModelDirective } from './directives/contenteditable-model.directive';
import { ChatWindowComponent } from './chat-window/chat-window.component';
@NgModule({
declarations: [
AppComponent,
ContenteditableModelDirective,
ChatWindowComponent,
...
],
imports: [
...
],
...
})
我尝试在我的组件中使用(ChatWindowComponent)
<p [appContenteditableModel] >
Write message
</p>
即使在指令内只有Angular CLI生成的代码:
import { Directive } from '@angular/core';
@Directive({
selector: '[appContenteditableModel]'
})
export class ContenteditableModelDirective {
constructor() { }
}
我收到了错误:
zone.js:388未处理的Promise拒绝:模板解析错误:无法绑定到'appContenteditableModel',因为它不是'p'的已知属性.
我尝试了几乎所有可能的更改,遵循这个有角度的文档,一切都应该工作,但它没有.
有帮助吗？
我想知道是否有办法将参数传递给指令？
我想要做的是从控制器附加一个指令,如下所示:
$scope.title = "title";
$scope.title2 = "title2";
angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>');
是否可以同时传递参数,以便我的指令模板的内容可以链接到一个或另一个范围？
这是指令:
app.directive("directive_name", function(){
return {
restrict:'E',
transclude:true,
template:'<div class="title"><h2>{{title}}</h3></div>',
replace:true
};
})
如果我想使用相同的指令但使用$ scope.title2会怎么样？
directive ×10
angularjs ×7
angular ×2
javascript ×2
arguments ×1
attributes ×1
bind ×1
binding ×1
c# ×1
components ×1
controller ×1
events ×1
handler ×1
jquery ×1
namespaces ×1
parameters ×1
ready ×1
reference ×1
typescript ×1