I am using Monaco editor with angular 1.6, In my UI I have different tabs(as in [this][1] example) pointing to different html page.
[1]: https://www.w3schools.com/howto/howto_js_tabs.asp I am using Monaco editor, but the problem is it is getting applied(integrated) to the items(text/textbox) only the first tab , if I apply in in other tab other than the first it is not showing up there , this is the bit of my code just to get an idea.
angular.module('sample').config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/',
controller: 'MainCtrl'
}).when('/sample1', {
templateUrl: '/sample1',
controller: 'sample1Ctrl'
}).when('/sample2', {
templateUrl: '/sample2',
controller: 'sample2Ctrl',
}).when('/sample3', {
templateUrl: '/sample3',
controller: 'sample3Ctrl'
}).when('/sample4', {
templateUrl: '/sample4',
controller: 'sample4Ctrl'
}).otherwise({
redirectTo: '/'
});
}]);
angular.module('sample').controller('TabCtrl', function ($scope) {
$scope.tabs = [
{
slug: 'sample1',
title: "Register sample1",
content: "sample1"
},{
slug: 'sample2',
title: "Register sample2",
content: 'sample2'
},
{
slug: 'sample3',
title: "Get sample3",
content: "sample3"
},
{
slug: 'sample4',
title: "Register sample4",
content: "sample4"
}
];
});
this is how I am using Monaco editor in the controller
$scope.experimentConfigEditor = monaco.editor.create(document.getElementById('experimentText'), {
value: '',
language: 'json',
minimap: {
enabled: false
}
});
$scope.newExperimentConfigEditor = monaco.editor.create(document.getElementById('newExperimentText'), {
value: '',
language: 'json',
minimap: {
enabled: false
}
});
$scope.getConfigFromDatalensTextEditor = monaco.editor.create(document.getElementById('getText'), {
value: '',
language: 'json',
minimap: {
enabled: false
}
});
and this is the sample html file
<div id="experimentText" name="experimentText" style="width:600px;height:200px;border:1px solid grey" ng-show="experimentText" ng-model="formData. experimentText"></div>
So If I use the controller with Monaco in the first tab then only Monaco is getting applied otherwise it's not working the html elements are coming as an simple elements without Monaco editor in UI.
Related
I have this configuration
angular.module('BlurAdmin.pages.form', ['ui.select', 'ngSanitize', 'textAngular'])
.config(routeConfig);
/** #ngInject */
function routeConfig($provide, $stateProvider) {
$provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions) { // $delegate is the taOptions we are decorating
taOptions.toolbar = [
['pre', 'quote','bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo', 'clear','justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent', 'insertImage','insertLink', 'insertVideo'],
[]
];
return taOptions;
}]);
$stateProvider
.state('form', {
url: '/form',
template : '<ui-view autoscroll="true" autoscroll-body-top></ui-view>',
abstract: true,
title: 'Form Elements',
sidebarMeta: {
icon: 'ion-compose',
order: 250,
},
})
.state('form.campaigns', {
url: '/campaigns',
templateUrl: 'app/pages/form/campaigns/campaigns.html',
title: 'Campaigns',
controller: 'CampaignsCtrl',
sidebarMeta: {
order: 0,
},
})
.state('form.campaigns.detail', {
url: '/:label',
// templateUrl: 'app/pages/form/campaigns/campaigns-details.html',
templateUrl: 'app/pages/components/mail/detail/mailDetail.html',
title: 'Campaign and Questions1',
controller: "MailListCtrl",
controllerAs: "listCtrl"
})
no in file campaigns.html i have a link like <p class="bold grey" ui-sref="form.campaigns.detail({id: '123', label: 'aaa'})">CLICK</p>.
Now when i am clicking 'CLICK' just the title of page is changing to Campaign and Questions1 but the template url is still the same i.e campaign.html instead of mailDetail.html
try this below ng-view because ui-view use in ui-router and ng-view use angularjs default router, (if are you using ui-view then you have to install ui-router
template : '<ng-view autoscroll="true" autoscroll-body-top></ng-view>',
I have a modular app who have multiple vendor plugins and I need to load only necessary in every view.
This is my routes:
(function() {
'use strict';
angular.module('app.empresas').config(config);
function config($stateProvider, $ocLazyLoadProvider) {
$stateProvider
.state('app.empresas', {
url: '/empresas?Filter',
views: {
'main#': {
template: require('./empresas/empresas.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresas',
bodyClass: '',
requiredLogin: true
}
})
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
template: require('./empresas.view/empresas.view.html'),
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
}
})
}
})();
I know how to include oclazyload resources without webpack, but now I need to include specific resources for every view. ¿How can do this?
I solved it using this snippet:
This is a sample of a state
.state('app.empresas.view', {
url: '/empresas/:ItemId',
views: {
'main#': {
templateUrl: '/app/main/apps/empresas/empresas.view/empresas.view.html',
controller: "AppController as App"
}
},
Params: {
title: 'Empresa',
bodyClass: '',
requiredLogin: true
},
resolve: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
var deferred = $q.defer();
var mod = importAll(require.context('./empresas.view/', true, /\.*$/));
$ocLazyLoad.load({
name: 'app.empresas.view'
});
deferred.resolve(mod);
return deferred.promise;
}]
})
I use this function with require to load entire folder with oclazyload and compile with webpack in a bundle separate file:
function importAll (r) {r.keys().forEach(r);}
I can load css, html, js files in one view without require files one by one
I'm having a problem I can't seem to figure out. When using ui-sref to change to a new state, the correct controller "does" load, but the current controller ALSO reloads. Twice in fact. (I set a break-point in the JavaScript and it hits that break-point twice).
Here is the relevant UI-router code:
.state('index',
{
abstract: true,
url: "/index",
templateUrl: "app/shared/content.html"
})
.state('index.cardholder',
{
url: '/cardholder',
views: {
'content': {
templateUrl: 'app/views/cardholder/cardholder.html',
controller: 'cardholderController'
}
},
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
name: 'app',
files: ['app/views/cardholder/cardholderController.js']
}
]);
}
},
params: {
loadParams: false
}
})
.state('index.cardholderedit',
{
url: '/cardholder/edit',
views: {
'content': {
templateUrl: 'app/views/cardholder/edit/editCardholder.html',
controller: 'editCardholderController'
}
},
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
name: 'app',
files: ['app/views/cardholder/edit/editCardholderController.js']
}
]);
}
},
params: {
id: null,
template: null
}
})
And here is the sref that calls the new state:
<a ui-sref="index.cardholderedit({ id:cardholder.empPersonDTO.personId, template:selectedTemplate})">
I did a search on cardholderController just to make sure I didn't have a naming issue somewhere - it all looks kosher.
Why is cardholderController reloading? How do I stop it?
I have an issue with my navigation bar. I used ngRoute from AngularJs and I can't understand why all the links work wrong at click.
Here my code:
app.ts file:
module AnimalPlanet {
export var app: angular.IModule;
app= angular.module("mainAnimalPlanet",["ngRoute"]);
app.config(['$routeProvider', ($routeProvider:ng.route.IRouteProvider, $locationProvider:angular.ILocationProvider) => {
$routeProvider.when('/', {
templateUrl: 'templates/main.html',
controller:"a"
})
.when('/pets', {
templateUrl: 'templates/pets.html',
controller:"MenuItemCtrl"
})
.when('/ldAdoption', {
templateUrl: 'templates/ldAdoption.html',
controller:"c"
})
.when('/111111', {
templateUrl: 'templates/contact.html',
controller:"d"
})
.when('/impressum', {
templateUrl: 'templates/impressum.html',
controller:"e"
})
.otherwise({
redirectTo: '/'
});
}]);
}
menuItem.ts file:
"use strict";
module AnimalPlanet {
export class MenuItemCtrl {
names: any[];
constructor(names) {
this.names = [{
name: "Main",
slug: "main",
active: true,
link: "/"
}, {
name: "Pets",
slug: "pets",
active: false,
link: "/pets"
}, {
name: "LDAdoption",
slug: "ldAdoption",
active: false,
link: "/ldAdoption"
}, {
name: "Contact",
slug: "contact",
active: false,
link: "/contact"
}, {
name: "Impressum",
slug: "impressum",
active: false,
link: "/impressum"
}];
}
}
angular.module('mainAnimalPlanet',['ngRoute']).controller("MenuItemCtrl", ["$scope", MenuItemCtrl]);
}
Please help me!!! Thank you!
Is there a way to pass data to controller without including a question mark ?
For example :
When i do this :
$location.path("/inventory/product").search({
id: 1
});
The end url looks like localhost:16684/#/inventory/product?id=8.
How can i make it so that it looks like localhost:16684/#/inventory/product/8 ?
Here is my route config :
{
url: '/inventory/product',
controller: 'inventory',
config: {
title: 'Products',
templateUrl: 'app/views/inventory.html'
}
},
Thanks!
Write it like this :
$location.path("/inventory/product/"+id)
add a second route, and make it go to the same controller
{
url: '/inventory/product',
controller: 'inventory',
config: {
title: 'Products',
templateUrl: 'app/views/inventory.html'
}
},
{
url: '/inventory/product/:id',
controller: 'inventory',
config: {
title: 'Products',
templateUrl: 'app/views/inventory.html'
}
},