angularjs-directive | 易学教程

Why isn't my directive's selection being bound to the controller?

阅读更多关于 Why isn't my directive's selection being bound to the controller?

I've got a very simple directive I'm working with - it's a small wrapper around a dropdown. I want to expose an attribute, "selectedOption" (well, selected-option) from it that I can two-way bind to the controller. I've set the property in the scope of the directive (and set it to = which I thought would allow the two-way binding), then exposed a property on the main controller. I've attached an example. I would have expected that the default item shown would be "Beta". And if I changed selections to Alpha, the Controller value would be updated to "A". But that doesn't happen - they appear to

Difference between $scope and scope in angularjs

阅读更多关于 Difference between $scope and scope in angularjs

I am new to angularjs. I would like to know what is the difference between $scope in angularjs Controller and scope in angularjs Directive. I tried to use scope in controller and I got the below error: Error: [$injector:unpr] Unknown provider: scopeProvider <- scope $scope is a service provided by $scopeProvider . You can inject it into controllers, directives or other services using Angular's built-in dependency injector: module.controller(function($scope) {...}) which is shorthand for module.controller(['$scope', function($scope) {...}]) In the first version the Dependency Injector infers

AngularJS and i18next

阅读更多关于 AngularJS and i18next

问题 I have seen some i18n plugins for Angular but I don't want to re-invent the wheel. i18next is a good library and so, I intend to use it. I have created a directive i18n which just calls i18n library: define(['app', 'jquery', 'i18n'], function(app, $, i18n) {'use strict'; app.directive('i18n', function() { return function($scope, elm, attrs) { attrs.$observe('i18n', function(value) { if ($.fn.i18n) {// for some reason, it isn't loaded quickly enough and first directives process fails $(elm)

AngularJS - Loading icon whilst waiting for data/data calculation

阅读更多关于 AngularJS - Loading icon whilst waiting for data/data calculation

问题 I have a simple Angular http.get: app.factory('countriesService', function($http) { return { getCountryData: function(done) { $http.get('/resources/json/countries.json') .success(function(data) { done(data);}) .error(function(error) { alert('An error occured'); }); } } }); Example .JSON: { "NoCities": 66, "Balance": 2103, "Population": 63705000, "CityInfo": [ { "CityName": "London", "CityPopulation": "7825200", "Facts": { "SubFact1": "xzy", "SubFact2": "xzy", "SubFact3": "xzy", "SubFact4":

Display pdf inside an ionic app

阅读更多关于 Display pdf inside an ionic app

Im developing an app with ionic framework and I need to display a pdf. I've read a lot on the internet and found this directive to use https://github.com/winkerVSbecks/angular-pdf-viewer The problem is that I'm having problems to integrate the directive with my ionic app. I've done the indicated steps: bower install angular-pdf-viewer Include the path to the lib, AngularJS and PDFJS: (here I changed the paths) <script src="lib/pdfjs-dist/build/pdf.js"></script> <script src="lib/angular/angular.js"></script> <script src="lib/angular-pdf-viewer/dist/angular-pdf-viewer.min.js"></script> Include

AngularJs, change menu item whether user is connected or not

阅读更多关于 AngularJs, change menu item whether user is connected or not

I am new to AngularJS and I try to deal with user authentication. I ensure non connected user can't access restricted route : app.js .config(function ($routeProvider) { $routeProvider .when('/myroute', { templateUrl: 'views/myroute.html', controller: 'MyrouteCtrl', access: { isFreeAccess: false } }) ... .run( function ($rootScope, $location, Auth) { $rootScope.$on('$routeChangeStart', function(currRoute, prevRoute){ if (prevRoute.access != undefined) { // if route requires auth and user is not logged in if (!prevRoute.access.isFreeAccess && !Auth.isLogged) { // redirects to index $location

How to pass a function reference in a recursive directive in Angular?

阅读更多关于 How to pass a function reference in a recursive directive in Angular?

问题 I have this directive: app.directive('recursiveListItem', ['$http', 'RecursionHelper', function ($http, RecursionHelper) { return { restrict: 'E', scope: { parent: '=', onNodeClick: '&', }, compile: function (element, attributes) { return RecursionHelper.compile(element); }, template: '<div class="list-group-item-heading text-muted parent "> \ <input type="checkbox" data-ng-click="visible = !visible" id="{{parent.Name}}">\ <label for="{{parent.Name}}"> </label>\ <a href="javascript:void(0)"

Why does the link function of my directive never get called?

阅读更多关于 Why does the link function of my directive never get called?

I have this directive: hpDsat.directive('ngElementReady', [function() { return { restrict: "A", link: function($scope, $element, $attributes) { // put watches here. console.log(" WHAT THE @#%*%$??? "); $scope.$eval($attributes.ngElementReady); } }; }]); I never see the output of the console.log . I'm declaring an element like this: <div data-ng-element-ready="console.log(' ------------------------------- COMPILED! ')" data-ng-if="analysis.type" data-ng-show="showBasicHtml" data-ng-include="analysis.type+'Content.html'"></div> Yes, I am declaring the directive before I declare the controller

How can an Angular directive compile() function access an isolated scope?

阅读更多关于 How can an Angular directive compile() function access an isolated scope?

I have the following directive: angular.module("example_module", []) .directive("mydirective", function() { return { scope: { data: "@mydirective" } compile: function(element) { element.html('{{example}}'); return function($scope) { $scope.example = $scope.data + "!"; }; } }; }); and the following HTML code: <!DOCTYPE html> <html ng-app="example_module"> <head> <meta charset="utf-8"> <title>Example title</title> <script src="lib/angular/angular.min.js"></script> <script src="js/example.js"></script> </head> <body> <div mydirective="Hello world"></div> </body> </html> I would expect the

Content briefly rendering then disappearing using ng-if

阅读更多关于 Content briefly rendering then disappearing using ng-if

I have some content on my page which is wrapped in an ng-if like below: <div ng-if="ShowMessgae" class="text-danger"> <p> <strong> Message displayed to User </strong> </p> </div> Then in my angular js controller I have the following: function MyController($scope, $q, notifyHelper) { openAjaxLoaderGif(); $scope.ShowMessgae = false; MyService.getVarsFromSession().then(function (result) { // some code removed for brevity if(some coditional) { $scope.ShowMessgae = true; } }, function (data, failReason, headers) { notifyHelper.error("Error has occurred - try again"); }) }) .finally(function () {