You could create a generic remove method that would take in the array and the item to remove. <div ng-app=”” ng-controller=”MyController”> <div ng-repeat=”email in emails”>{{ email }} <a ng-click=”remove(emails, $index)”>Remove</a> </div> <div ng-repeat=”phone in phones”>{{ phone }} <a ng-click=”remove(phones, $index)”>Remove</a> </div> </div> $scope.remove = function(array, index){ array.splice(index, 1); }
You’ll need to watch a function that returns the $modelValue you’re watching. The following code shows a basic example: app.directive(‘myDirective’, function (){ return { require: ‘ngModel’, link: function(scope, element, attrs, ngModel) { scope.$watch(function () { return ngModel.$modelValue; }, function(newValue) { console.log(newValue); }); } }; }); Here’s a plunker of the same idea in action.
EDIT 2/2/16: The 1.5 documentation now covers components: https://docs.angularjs.org/guide/component Some thoughts based on some reading (links below): Components aren’t replacements for directives. A component is a special type of directive that organizes a controller with a template. Components do not have a link function and controllers still are not where you’d handle DOM manipulation. If … Read more
The code for the confirmation dialogue can be written shorter this way: $scope.$on(‘$locationChangeStart’, function( event ) { var answer = confirm(“Are you sure you want to leave this page?”) if (!answer) { event.preventDefault(); } });
I wrote a working CodePen example to demonstrate a great way of filtering numeric user input. The directive currently only allows positive integers, but the regex can easily be updated to support any desired numeric format. My directive is easy to use: <input type=”text” ng-model=”employee.age” valid-number /> The directive is very easy to understand: var … Read more
Thanks to Flek for answering my question in his comment: http://jsfiddle.net/eTTZj/30/ <div ng-app=”myApp” scroll id=”page” ng-class=”{min:boolChangeClass}”> <header></header> <section></section> </div> app = angular.module(‘myApp’, []); app.directive(“scroll”, function ($window) { return function(scope, element, attrs) { angular.element($window).bind(“scroll”, function() { if (this.pageYOffset >= 100) { scope.boolChangeClass = true; } else { scope.boolChangeClass = false; } scope.$apply(); }); }; });
From my point of view, there is no need to use external libraries like register.js, because you can create directive as a ES6 class in this way: class MessagesDirective { constructor() { this.restrict=”E” this.templateUrl=”messages.html” this.scope = {} } controller($scope, $state, MessagesService) { $scope.state = $state; $scope.service = MessagesService; } link(scope, element, attrs) { console.log(‘state’, scope.state) … Read more
Looks like it’s supported. Taken from a thread on AngularJS Google Group: the url with “https://stackoverflow.com/” prefix is relative to the domain, without the “https://stackoverflow.com/” prefix it will be relative to the main (“index.html”) page or base url (if you use location in the html5 mode). This works fine: templateUrl: ‘/Scripts/app/templates/personalDetails.html’
Yes. You can use attr.$observe if you use interpolation at the attribute. But if this is not an interpolated attribute and you expect it to be changed from somewhere else in the application (what is extremely not recommended, read Common Pitfalls), than you can $watch a function return: scope.$watch(function() { return element.attr(‘class’); }, function(newValue){ // … Read more
If you want to validate email then use input with type=”email” instead of type=”text”. AngularJS has email validation out of the box, so no need to use ng-pattern for this. Here is the example from original documentation: <script> function Ctrl($scope) { $scope.text=”me@example.com”; } </script> <form name=”myForm” ng-controller=”Ctrl”> Email: <input type=”email” name=”input” ng-model=”text” required> <br/> <span … Read more