angularjs-directive | 易学教程

Error in directive implementation of regex test as attribute - validations (typescript + angular)

阅读更多关于 Error in directive implementation of regex test as attribute - validations (typescript + angular)

问题 I'm trying to build a module that has directive for custom validations. The validations are done via regex. The error I am seeing is: Error: [$injector:unpr] Unknown provider: REG_EXPProvider <- REG_EXP <- uniIdValidatorDirective My code looks like this: config.ts: module LoginModule { 'use strict'; /***** REGEX *****/ export class regExp { public ID_OR_PASSPORT = /^[0-9]{9}$/; public USERNAME_SINGLE_WORD = /^[A-Za-z0-9à-ú-_\.]{6,8}$/; public PASSWORD = /^[A-Za-z0-9à-ú-_\.]{8}$/; public EMAIL

Including angular templates on one external .html

阅读更多关于 Including angular templates on one external .html

问题 In angular, you can create a template in the page itself like: <script type="text/ng-template" id="something.htm"> <div>This is a template.</div> </script> I'm wondering if you can take a bunch of these and put them together in an external page, like "templates.htm", and then reference the entire page, essentially saying "look in templates.htm for the template something.htm." 回答1: If you don't mind a little decrease in performance, here is a working example for what I have said in the comment

Execute Javascript after directive template has been loaded

阅读更多关于 Execute Javascript after directive template has been loaded

问题 I have created my custom directive for rating in angularJS. I want to run javascript after loading of html template. So how can i do that? my code: app.directive('ratingControl',function(){ return { restrict:'EA', templateUrl:'rating.htm', link :function(scope,element,attr) {} }; }); 回答1: Use $timeout function in link: // You might need this timeout to be sure it runs after DOM render. $timeout(function () { //your code }, 0,false); 来源： https://stackoverflow.com/questions/26945359/execute

How to move to second tab on click of a button when using angularjs tab directive

阅读更多关于 How to move to second tab on click of a button when using angularjs tab directive

问题 Hi I'm using angular tab directive.The link for JS fiddle is AngularJs Tab Directive .My Question is How can I move to second tab from first tab with click of a button?Thanks <tabs> <pane title="First Tab"> <button type="button" ng-click="moveToSecondTab()">Second Tab.</button> </pane> <pane title="Second Tab"> <div>This is the content of the second tab.</div> </pane> 回答1: Instead of hardcoding the panes in your HTML file, fetch it from your controller. Something like $scope.tabs = [ { title:

Service with promise and $watchCollection not updating the values

阅读更多关于 Service with promise and $watchCollection not updating the values

I'm trying to build real time service messaging with MongoDB and AngularJS. For some reason, when there is new data in my 'messaging' collection, the Messaging.getAllMessages() service is not triggered and my data is not updated in the view, using $watchCollection. This is in my services.js , the important function is getAllMessages() : angular.module('myApp') .factory('Messaging', function($resource, $http, $q, $rootScope){ var myData = {}; return { sendMessage: function(message, success, error) { $http.post('/api/v1/users/' + message.to.id + '/messages', message).success(function(res) {

Angularjs custom directive using http promise not binding with template

阅读更多关于 Angularjs custom directive using http promise not binding with template

I am new to angularjs and want to add new feature in existing code. But code is not working as expected. I know i am not doing it the right way. Please correct me where is the mistake. I don't know why controller is not used but directive is used in this approach? Here is my custom service and custom directive directive code. Service code: angular.module("quickquiz-builder").service("SettingsService", function ($http, $q) { return { /* Return deffered promise response */ get: function() { var deferred = $q.defer(); $http.get('get.php') .then(function(response){ var config = response.data

angular scope confusion

阅读更多关于 angular scope confusion

问题 So lets say I am writing a custom directive that loads a template into a div. My custom directive is called loadClickedTpl . When loadClickedTpl is clicked it should read the attribute and load the template into #target . So far my html looks something like this: <html np-app="mymodule"> <head>...</head> <body> <a loadClickedTpl tplSrc="myTpl" > Click Me to load template </a> <div id="target" ng-include src="clickedTpl"></div> <script type="text/ng-template" id="myTpl"> <h1>Loaded</h1> <

Custom Directive Button with Confirm Popup

阅读更多关于 Custom Directive Button with Confirm Popup

问题 I have a button directive as follows (Plunker is here): <button type="button" data-confirm-popup-btntext="Reject" data-confirm-popup-text="Do you want to reject" data-confirm-popup-header="Reject" data-confirm-popup-click="reject(obj)" class="btn btn-danger btn-xs" data-ng-class="{disabled : disable}" data-ng-if="show"></button> I have data-confirm-popup-btntext for button text. Which I do not want. I also do not want data-confirm-popup-click . Rather I want to use ng-click . My concept is,

AngularJS - directive scope not setting ng-class on element

阅读更多关于 AngularJS - directive scope not setting ng-class on element

Plunker I have a table of data: <table class="table table-hover" ng-class="dndElemClass" drag-and-drop> ... </table> My goal is to give the table a drop shadow by assigning $scope.dndElemClass = 'on-drag-enter' on the element's ondragenter event listener: .on-drag-enter { -webkit-box-shadow: -3px 3px 5px 3px #ccc; ... } The onDragEnter directive is as follows: directive('dragAndDrop', function() { return { restrict: 'A', controller: function($scope) { $scope.dndElemClass = ''; }, link: function($scope, elem, attr) { $scope.$watch('currentFolder.canUpload', function(newValue, oldValue) { if

AngularJS - open controller in a dialog (template loaded dynamically)

阅读更多关于 AngularJS - open controller in a dialog (template loaded dynamically)

问题 I'm playing around with AngularJS. I'm using a controller and a templateUrl to have things done automagically :) Currently the layout has only <div ng-view></div> directive into which all the things are loaded. I'd like to open the modal (Bootstrap or jQuery UI, doesn't matter) and load there ( inside a modal's body ) the controller specified by given link. Just like every link "opens" (loads the template & does all the DOM compilation & linking) inside my main ng-view , I'd like some of the