我正在尝试为我的AngularJS项目创建一个自定义指令
这是我到目前为止所拥有的:
.directive('testDirective', [
function () {
return {
restrict: "EA",
replace: false,
transclude: false,
link: function ($scope, el, attrs) {
var param = {};
param.className = attrs.customClass || 'default-class';
param.distinctClassName = attrs.distinctClass || 'added-class';
el.addClass(param.distinctClassName); // this works? :|
var createdDiv = null;
createdDiv = createdDiv || document.createElement('div');
createdDiv.className = param.className; // this works...
createdDiv.addClass(param.distinctClassName); // this doesn't work? :/
}
};
}
]);
就目前而言,这是一个非常简单的指令,但它会变得更大.我正在动态创建一个元素,因为我想将它用作模态框,我将向主体添加一个div.
我想添加一个不同的类,同时保持原始类具有所有默认样式.
这是发生了什么:
使用<test-directive custom-class="first" distinct-class="second" />模板
这已经完全把我推上了几个小时了.
我有我的app.js.
'use strict';
/**
* @ngdoc overview
* @name myWellnessTrackerApp
* @description
* # myWellnessTrackerApp
*
* Main module of the application.
*/
angular
.module('myWellnessTrackerApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
我的main.html在加载时加载到主页面,如上所示.
<innerPageHeader> </innerPageHeader>
我的指示.
angular.module('myWellnessTrackerApp')
.directive('innerPageHeader' ,function () {
return {
template: '<h4>TEST</h4>',
restrict: 'E'
};
});
我的index.html scritps:
<!-- build:js(**/*) scripts/vendor.js --> …我创建了一个如下所示的指令:
app.directive('superDir', function ()
{
function link(scope, element, attrs) {
scope.$watch('elements', function (value, old)
{
element.replaceWith(scope.elements.join(""))
},true);
}
return {
link: link
};
});
然而,elements数组被修改并被$watch触发我收到一个异常:
Cannot read property 'replaceChild' of null
html看起来像这样:
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<super-dir></super-dir>
</div>
你能告诉我为什么不能更换super-dir标签吗？
谢谢
我正在编写一个使用transclusion的自定义指令.我需要在进行转换后对已转换的DOM内容进行修改....我想在后链接或控制器中执行此操作还是...链接...？我不知道transclusion在哪里发生的事情顺序,所以我不知道如何确保我的JS在转换发生后执行.
有一个问题,我想在指令中得到一些东西
,我想在html中设置它
,如何在html中设置,并获得指令？
有html
<div my-directive="Bob">
<div>
directive.js
App.directive('myDirective', function () {
link: function () {
console.log('xxx')
}
})
如何获得Bob指令？
在我看来,我有以下指令:
<line-chart data="buildData(id)" options="buildOptions(id)" />
在我的控制器中我有:
var onGetData = function (response) {
return response.data;
}
$scope.buildData = function(id) {
dataService.getDataById(id).then(onGetData);
}
在我的指示中,我有:
function lineChartLink($http){
return function(scope, element, attrs) {
chart.bindData(scope.data);
}
}
现在,我的问题是,如何获得线图指令所需的数据？
我正试图从指令访问服务,但无论我做什么,它们似乎都是未定义的.MyDirective.factory()在初始化指令时表示未定义.在构造函数中也未定义(毫不奇怪).
我试图做这些说明同样无效:
http://blog.aaronholmes.net/writing-angularjs-directives-as-typescript-classes/
http://sirarsalih.com/2014/08/04/ 使用TypeScript和$ inject机制正确依赖注入你的angularjs-typescript-apps/
定义AngularJS指令
这是app.ts:
angular.module("fooTest", [])
.service("myService", Foo.MyService)
.directive("myDirective", Foo.MyDirective.factory());
MyDirective.ts:
module Foo {
'use strict';
export class MyDirective implements ng.IDirective {
private myService: any;
//static $inject = ['myService'];
constructor(service: MyService) {
this.myService = service;
}
restrict = "E";
replace = true;
template = "<div ng-click='fooClick()'>foo: {{foo}}</div>";
scope = {
foo: "="
};
link = (scope, element, attrs) => {
scope.fooClick = function () {
this.myService.foo();
scope.foo = this.myService.getBar();
}
};
static factory() …我是angularjs的新手,我制作了一个示例应用程序,现在我想在使用隔离范围指令提交表单时在下一页上显示数据.我的index.html:
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i> Contact</a> </li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ui-view></div>
</div>
</body>
指示:
var scotchApp = angular.module('scotchApp');
scotchApp.directive('homeData', function() {
return {
scope: {
info: '=fo'
},
templateUrl: 'homeDirective.html'
}
scotchApp.controller('MyFormCtrl', [function() {
this.user …我只是使用Github的API抓取我的Github信息.当我记录我的http请求时,它会显示正确的信息..我不知道为什么它没有显示在页面上.我没有收到任何错误.(部分显示,而不是请求的数据)
服务:
myApp.factory('githubApi', ['$http',
function($http) {
//Declaring a promise that will or will not return a users github information.
return {
async: function() {
return $http.get('https://api.github.com/users/joshspears3');
}
}
}
]);
控制器:
myApp.controller('githubCtrl', [ 'githubApi', '$scope',
function(githubApi, $scope){
$scope.data = githubApi.async();
}
]);
指令:
myApp.directive('githubRequest', [
function() {
return {
scope: {},
restrict: 'E',
controller: 'githubCtrl',
templateUrl: 'public/views/partials/github-request.html'
}
}
]);
github-request.html(部分):
<p class="component-example-header">Creating a service. Grabbing information based on the github API.</p>
<div>
Making a $http …我正在创建两个使用相同控制器的指令,因此我看到两个指令在控制器之间共享数据.我想要的是每个指令的数据都是UNIQUE,因此不应该共享数据.
var app = angular.module("app",[]);
app.controller('myCtrl', function($scope){
$scope.data = {
name: 'Javier'
};
});
app.directive('dir1', function(){
return {
template: "<div style='background:red'><input type='text' ng-model='data.name'>{{data.name}}</div>",
controller: "myCtrl"
};
});
app.directive('dir2', function(){
return {
template: "<div style='background:yellow'><input type='text' ng-model='data.name'>{{data.name}}</div>",
controller: "myCtrl"
};
});
https://jsbin.com/vetikuvada/1/edit?html,js,output
因此,在我的示例中,我想要的是当我在其中一个文本框中编辑文本时,它不会触发其他文本框中的更改.我知道控制器部署了不同的实例,但不知怎的,它们共享范围,我需要完全不同.这可能吗？
该示例是一个非常复杂的应用程序的一小部分,所以我必须能够使用这种方法而不是其他方法.
javascript angularjs angularjs-directive angularjs-scope angularjs-controller