angularjs-components

How to operate functions of component controllers from outside

安稳与你 提交于 2019-12-12 06:49:10
问题 I have a component with a function inside: app.component("myComponent", { templateUrl: "myComponent.html", controller: function() { this.addApp = function (arg) { console.log(arg); }; } }) I would like to operate that function from outside the component: <my-component> </my-component> <button type="button" ng-click="something.addApp('Cheese')" class="btn-sm btn-default no-modal" > Add Application </button> How to do that? 回答1: To access functions of component controllers, use the ng-ref

AngularJS controller function not recognized

痞子三分冷 提交于 2019-12-12 03:09:13
问题 I have an AngularJS project with the structure shown in the first picture. I use custom tags defined as angularJS components. My main layout uses the custom tag by displaying it in a tab. The code snippet from my main-layout component is the following: <uib-tabset type="pills" active="$ctrl.getActiveTab()"> <uib-tab class="mormontTab" heading="Tab0" ng-show="$ctrl.drFormActive() && $ctrl.daFormInactive()" ng-click="$ctrl.setActiveTab(0)"> <drform-tag></drform-tag> </uib-tab> <uib-tab class=

How is styling being applied on selected characters of the string- AngularJS

微笑、不失礼 提交于 2019-12-11 18:37:00
问题 I came across rich text editor in this plunkr and wanted to know how exactly is the code able to understand that a particular element has to be decorated with bold styling ? The $container.html() shows proper styling in console but how it knows which part of string was selected for styling ? 回答1: So that plunkr is using a HTML5 feature called contenteditable . In short this attribute turns a html element (usually a div) into something that can act like a textarea, but you're editing the

AngularJs: How to pass part of my data from one component to another

浪子不回头ぞ 提交于 2019-12-11 09:47:02
问题 I have an angular control that I use to display a set of data looking roughly like the following example. Apart from a unique block, it has a number of repeating (but discrete) blocks of the same structure. { "person": { "lastName": "Bettertester", "firstName": "Fester", "address": "Out in the woods 17", "zipCode": "10666", "place": "Back of beyond" }, "contact1": { "firstName": "Jane", "lastName": "Doe", "phone": "555-987-654", "relationship": "Aunt" }, "contact2": { "firstName": "Kherumple"

How to Properly use the ng-model Directive and its Controller in Custom Directives?

馋奶兔 提交于 2019-12-11 09:13:04
问题 I've created a directive which wraps jstree and I used ng-model inside my custom directive tag to pass some json data. My question is : Do I have to use ng-model in this case ? 回答1: I've created a directive which wraps jstree and I used ng-model inside my custom directive tag to pass some json data. Do I have to use ng-model in this case ? The ng-model directive instantiates the ngModelController. It is a complex directive that enables form validation and is the prerequisite for the ng-change

Set global constants in AngularJs

杀马特。学长 韩版系。学妹 提交于 2019-12-11 08:38:25
问题 I am trying to create constants js file in angular js for an application. I am using below code to implement constants for entire application. It's working fine. <code> // app.js angular.module('myApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute' ]) .constant('config', { mySetting: 42 }) .config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); }); </code> My concern is in app.js file I

angular component one-time binding from $http shows undefined

人走茶凉 提交于 2019-12-10 18:04:42
问题 I'm new to Angular. I'm trying to use components (1.6). In the parent, I have an $http.get that gets data from a service and then assigns the response to a $scope variable. That scope variable is passed to a child component using one-way binding < . In the JavaScript, if I alert the variable passed in, I get "undefined", however, the html template in the child does show the variable. It's like there is a race condition happening and I don't know how to tell it to wait until the data from the

Ui-router 1.0.0.beta1 $transitions.onSuccess from $rootScope.on('$stateSuccess',

南笙酒味 提交于 2019-12-10 16:33:14
问题 In my AngularJS (v. 1.5.x), I'm converting my controller-based states to component-based states with ui-router 1.0.0 (currently in beta 1). I'm having troubles catching state changes, that where previously caught with $rootScope.on('$stateSuccess', ... . As far as I can tell, I am doing what described in the docs, and in this SO question, therefore I am wondering if I am missing something or if this is a bug of the beta 1 release. I have not converted all controllers yet, only few. The

how to set header for each page using component in Angular 1.5

孤街醉人 提交于 2019-12-10 10:26:43
问题 I started with Angular 1.5 component recently. I am having various pages in my application. So I decided to create a <my-title> component which am using inside <my-header> component. As you see in navbar I have First, Second as navigation links. In my application there will be more parent child combinations. I want to set title of each page by two way. By giving it in partial <my-title>Home</my-title> (see 1.html or 2.html) (Manuel's answer satisfies this Scenario) Also I would like to set it

Upgrade AngularJs 1.5 to 1.6 - which exact bindings are affected by change in $compile reg controller instances?

半城伤御伤魂 提交于 2019-12-10 04:46:31
问题 Documentation for a change in $compile when upgrading from AngularJs 1.5 to 1.6 states: pre-assigning bindings on component/directive controller instances is disabled by default, which means that they will no longer be available inside the constructors. — AngularJS Developer Guide - Migrating to V1.6 - $compile The upgrade example in the documentation is as follows (shortened): Before .component('myComponent', { bindings: {value: '<'}, controller: function() { //... } }) After .component(