angularjs-directive | 易学教程

Use AngularJS directive in Angular Component

阅读更多关于 Use AngularJS directive in Angular Component

问题 I'm trying to upgrade an angularjs directive to use it my angular component. I've gotten the hybrid (ng1 + ng2) environment to work. I can also inject angularjs services in angular and use them in angular components (I actually got this working even with angularjs 1.4.x). Now I'm trying to use an existing angularjs directive in angular, but not working. For reference, are some snippets of my codes. [index.html] (my-app is the Angular 4 root component) ... <body> <div class="banner">Angular

Selenium does not see AngularJS page elements

阅读更多关于 Selenium does not see AngularJS page elements

I have problem with writing Selenium test to check my application. What I want to test is when user types correct login/password, correct page is shown and user is logged in. The main issue is that my login form is generated as a AngularJS directive (I have two different login pages and this directive is reused in both places) and Selenium seems to be unable to see elements from this directive-generated markup. What is most important, tests were passing on this page before I've replaced regular markup with generated by directive. So it looks like somehow Selenium is not able to see html

Amazon DynamoDB and AngularJS

阅读更多关于 Amazon DynamoDB and AngularJS

问题 So, I created an AWS dynamoDB table (database) and I am ready to get that data with AngularJS. How do I do this with AngularJS? Do I need to setup another service with Amazon? Or can I access my database directly? I was unable to find anything related to DynamoDB and AngularJS directly. Any help would be greatly appreciated! 回答1: While the Mars JSON demo is excellent, here's a really simple example to get started that uses AWS SDK for JavaScript v2.1.33. Switch out the keys for your own. This

Components and directives in angular 1.5

阅读更多关于 Components and directives in angular 1.5

问题 The big feature changes in Angular 1.5 are surrounding the support of components. component('myComponent', { template: '<h1>Hello {{ $ctrl.getFullName() }}</h1>', bindings: { firstName: '<', lastName: '<' }, controller: function() { this.getFullName = function() { return this.firstName + ' ' + this.lastName; }; } }); While this is all good, I am not sure how this differs from directives. What are the benefits of using components over traditional custom directives? And are components in

Angular.js: Wrapping elements in a nested transclude

阅读更多关于 Angular.js: Wrapping elements in a nested transclude

问题 This seems like such a simple thing, but I am just not able to wrap my head around how to do it. Here is what I want: <my-buttons> <my-button ng-click="doOneThing()">abc</my-button> <my-button ng-click="doAnotherThing()">def</my-button> </my-buttons> That turns into something like this: <ul class="u"> <li class="l"><button ng-click="doOneThing()">abc</button></li> <li class="l"><button ng-click="doAnotherThing()">def</button></li> </ul> Notice how the ng-click is on the button , inside a

Image upload directive (angularJs and django rest framework)

阅读更多关于 Image upload directive (angularJs and django rest framework)

问题 I need an image upload directive, here is how my code looks like: # Model class transporter(models.Model): company_name = models.CharField(max_length=100) address = models.CharField(max_length=100) image = models.FileField(upload_to=upload_path,blank=True, null=True) def upload_path(self, filename): return 'photos/%s/%s' % (self.company_name, filename) # Serializer class transporterSerializer (serializers.HyperlinkedModelSerializer): username = serializers.Field(source='username.username')

Breaking a form between multiple tabs in angular breaks validation

阅读更多关于 Breaking a form between multiple tabs in angular breaks validation

问题 I have an angular form spitted between several tabs with angular UI directive. <form name="campaignForm" class="form-horizontal" novalidate > <input type="text" name="title" class="input-xxlarge" placeholder="Campaign title" ng-model="campaign.title" required> <span ng-show="campaignForm.title.$error.required" class="help-inline"> Required</span> <tabset> <tab> </tab> <input type="email" name="emailFrom" class="input-xsmall" placeholder="From email address" ng-model="campaign.info.emailFrom"

Binding ngModel to a custom directive

阅读更多关于 Binding ngModel to a custom directive

So I have been working on this issue for a week now and i cannot seem to get my head around this whole Directive thing. I have read lots of posts ... Demystifying Directives Directives Compile, Pre and Post Linking a bunch of videos ... Creating Reusable Directives in AngularJS Writing Directives And gone through StackOverflow and other forums (links to follow) hoping something will sink in ... I think that the problem that I am running into is that I want to UNDERSTAND why/how these work so that I am not cut/pasting someone else's solution into my code but then having to ask again later when

Dynamically adding/creating object to array from angular view to controller using two way binding

阅读更多关于 Dynamically adding/creating object to array from angular view to controller using two way binding

I have one controller, controller's template/view as below, myController angular.module('myApp', []). controller('myController', ['$scope', function($scope) { $scope.myObject = {}; }]); myView <div class="container" ng-app="myApp"> <form name="myForm" novalidate ng-controller="myController"> <div class="form-group"> <label for="firstname" class="control-label col-xs-2">Name</label> <div class="col-xs-10"> <input type="text" ng-model="myObject.firstname" id="firstname"> </div> </div> <div class="form-group"> <label for="lastname" class="control-label col-xs-2">LastName</label> <div class="col

angular, in directive, adding to the template an element with ng model

阅读更多关于 angular, in directive, adding to the template an element with ng model

I'm trying to add an input element with ng-model inside a directive. my code the link function of my directive: link: function (scope, element, attrs) { var elem_0 = angular.element(element.children()[0]); for (var i in scope.animals[0]) { elem_0.append(angular.element('<span>' + scope.animals[0][i].id + '</span>')); //this part doesn't work var a_input = angular.element('<input type="text">'); a_input.attr('ng-model', 'animals[0][' + i + '].name'); //end elem_0.append(a_input); } it seems i need to call $compile() at the end, but have no idea how. Arun P Johny Try var a_input = angular