angularjs-directive

问题 The biggest problem I have with Angular 1 is how difficult it is to extend (in the object-oriented sense) a directive. For example, it is almost impossible to reuse the input[number] directive on my a custom widget and I had to re-implement all the validation and type conversion code. Angular 2 components are implemented as classes so it seems they can be easily extended. However, they also have that @Component annotation with very specific selectors, etc., which makes it unclear to me if

问题 I'm trying to distinguish between internal change and an external change with a two-way data-bound attribute ( '=' ). In other words: I don't want to $watch to fire on the value if the change was internal (i.e. the scope variable was changed in the controller or in the link function). Here some code that illustrates my problem: HTML <div ng-app="myApp"> <div ng-controller="MainCtrl"> <input ng-model="value"/> <mydemo value="value"></mydemo> </div> </div> Javascript app.directive('mydemo',

问题 I'm trying to create a directive that will change the html element type (h1/h2/h3) by using a drop down selector of "Large", "Medium", "Small". I want it to also retain attributes on the element. I have created a fiddle of this example: http://jsfiddle.net/H63Z3/1/ Angular: angular.module('app', []) .controller('example', function ($scope) { $scope.type = 'h2'; }) .directive('changeType', function ($compile) { return { restrict: 'A', link: function (scope, element, attributes) { scope.$watch(

问题 Simple as it should be, it won't work as this code can't detect AngularJS codes. <a href="whatsapp://send?text={{challenge.challenge_title}}" data-action="{{FullURL}}">Whatsapp</a> Do i need a directive for this? If yes, what is it? Someone with experience in AngularJS, kindly help. 回答1: You need to sanitize anchor href inside your config phase of angular, that will allow your href with whatsapp prefix. Code app.config(function($compileProvider){ //other configuration code here

问题 I'm trying to write a directive to create a map component so I can write something like: <map></map> Now the directive looks like this: angular.module('myApp') .directive('map', function (GoogleMaps) { return { restrict: 'E', link: function(scope, element, attrs) { scope.$watch('selectedCenter', function() { renderMap(scope.selectedCenter.location.latitude, scope.selectedCenter.location.longitude, attrs.zoom?parseInt(attrs.zoom):17); }); function renderMap(latitude, longitude, zoom){

问题 In AngularJS, I have the following scenario where a directive can accept an optional boolean parameter which should default to true by default, whenever it is not specified . Example: <my-directive data-allow-something="false"> ... this works as expected as no default value should be set in this case ... </my-directive> <my-directive> ... but in this case i'd like allowSomething to equal true ... </my-directive> I've tried the following approach, but for some reason the true value doesn't

问题 I am using ng-table. I tried to use filter given in the example, but for filtering each column i need to have separate textbox. But what i tying to achieve is, One textbox to search any row based on any column data. How can i achieve this ? Just like jquery datatable search box. 回答1: This is how i did Html <input type="text" ng-model="searchUser"> <table ng-table="tableParams"> <tr ng-repeat="user in $data"> ... </tr> </table> Script var usersData = []; // initial data $scope.tableParams =

问题 I'm trying to set operation hours for a business. End time should be 1hr after the start time and the endtime dropdown should not show values on/ before start time. Here is my fiddle (function() { 'use strict'; angular.module('agencyApp', []) .controller('HoursController', HoursController) .directive('timePicker', timePicker); function HoursController() { var vm = this; vm.print = function() { console.log(vm); }; vm.setClosed = setClosed; vm.setAllWeekdayClosed = setAllWeekdayClosed; vm

问题 I'm building an accessible website and trying to manage focus. I need to open a modal and then put focus on the first element in the modal then trap the focus until the modal is closed ("canceled" or "accepted"). HTML <a href="" ng-click="modalshow = !modalshow; modal.open();">Open Modal</a> <div ng-show="modalshow" id="modal"> <h3 id="tofs" >Terms of Service</h3> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> <span>Cancel</span> <span>Accept/span> </div> <h2>Seprate Content</h2>

问题 I'm writing some tests for an Angular directive and I need to simulate user input into an input field. I tried to do this: element.find('input').val('some value').trigger('input'); but it didn't work. Triggering change didn't work either. I know I can access the element scope directly with element.scope() and change it, but it seems more natural to change the input's value and let Angular do the data binding. For what it's worth, I've checked out input(name).enter(value) from Angular