I have a problem with my gulp file. It is compile all correctly, except the strings with backticks. Is there some package or solution to fix that?
This is my gulpfile.js code:
const gulp = require('gulp');
const concat = require('gulp-concat')
const uglify = require('gulp-uglify');
gulp.task('scripts', function() {
return gulp.src([
'script.js'
])
.pipe(concat('script.min.js'))
.pipe(uglify())
.pipe(gulp.dest('js/min/'))
});
And the result is:
...const t=document.createElement("div");t.innerHTML=`
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<p>${e.text}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">${e.accept}</button>
</div>
</div>
</div>
</div>`,document.querySelector("body").appendChild(t)}...
Related
First of all, I've seen this Close Bootstrap Modal but of some reason it's not working for me.
I have a page, where one modal is called from like this
<button type="button" #onclick="#(()=>modal.Show<LandingPageHelpPopUp>())" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Click here to get help</button>
That page's code look like this
<div class="modal-dialog" id="myModal" style="margin-left:-200px;margin-bottom:-550px;position:absolute;">
<div class="modal-content" style="background-color:gray;">
<div class="modal-body" style="color:black;">
<p>Here you can observe the controlling of the curtains by others. If the queue is empty, and you'll like the control, hit this button.</p>
<div class="modal-footer" style="float:right;border:none;margin-bottom:-25px;">
<label class="custom-close" #onclick="#(()=>modal.Show<LandingPageHelpPopUp2>())">Next page</label>
<button class="next-button" style="margin-left:-3px;"><i class="fa fa-angle-right"></i></button>
</div>
</div>
</div>
</div>
<img src="css/arrow-help.png" class="arrow-help">
From here, I'd like to see another modal. To do that, I guess I have close the first one first, in order to not create a double layer of modals - if that makes sense. That's where I have used the linked thread in the beginning, but somehow it doesn't work.
The second modal's code look like this
<div class="modal-dialog" id="myModal2" style="margin-left:-200px;margin-bottom:-550px;position:absolute;">
<div class="modal-content" style="background-color:gray;">
<div class="modal-body" style="color:black;">
<p>If other users is in the queue, click here to get in line.</p>
<div class="modal-footer" style="float:right;border:none;margin-bottom:-25px;">
<label #onclick="#(()=>modal.Show<LandingPageHelpPopUp>())">Previous page</label>
<button class="next-button" style="margin-left:-3px;margin-top:-2px;"><i class="fa fa-angle-right"></i></button>
</div>
</div>
</div>
</div>
<img src="css/arrow-help2.png" class="arrow-help2">
In my index.html I've these two scripts, that is meant to toggle the modals. That is if one modals is open, when the other one is shown, it should close.
<script>
$(function () {
$(".custom-close").on('click', function () {
$('#myModal').modal('hide');
});
});
</script>
<script>
$(function () {
$(".custom-close2").on('click', function () {
$('#myModal2').modal('hide');
});
});
</script>
Here's some screenshots, showing that the previous modal does not get closed, so it's just creating multiple layers of modals on top of each other. Here, Here, And here
Sorry for all the unnecessary code (styling, bad naming etc)
Doe any of you know why the previous modal is not getting closed, whenever the next is getting shown?
I cannot get the following code to run. I have tried many many things including: $locationprovider.html5mode(true) (and a element in the of my index.html.)
With this code I get /#!/index#%2Ffishes (with my base infront of it) in my URL. With html5mode I would get #fishes but the view would not change.
Plunkr:
http://plnkr.co/edit/a2lkCuxMf0ll9e9QAyiv?p=preview
Index:
<body ng-app="VissenApp">
<div class="AngularWrapper">
<div ng-view>
</div>
</div>
</body>
App.js:
var app = angular.module("VissenApp", ["ngRoute"]);
app.config(function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when("/index", {
templateUrl : "landing.html",
controller: "fishesController"
})
.when("/fishes", {
templateUrl : "fishes.html",
controller: "fishesController"
})
.otherwise({
templateUrl : "landing.html",
controller : "fishesController"
});
});
app.controller('fishesController', function($scope,$location) {
$scope.toFishes = function () {
$location.path("/fishes");
};
});
Fishes.html
<div class="container-fluid">
<div class="jumbotron">
gfhhgfh
</div>
</div>
Landing.html
<div class="container-fluid landing_background">
<div id="landing_logowrapper" >
<div ng-click="toFishes()" id="landing_logobackground" >
</div>
</div>
</div>
My code is simple. I need to refresh a ng-repeat.
HTML
<div class="quick-actions" ng-controller="DashboardController">
<div class="ui accordion segment">
<div class="ui top attached label active title">
<?php echo __('My Tasks'); ?>
<i class="minus icon"></i>
</div>
<div class="active content">
<div class="ui items" ng-show="myTasks" id="myTasks">
<!-- Creacion de Items de los Taks -->
<div class="item" ng-repeat="T in myTasks">
<div class="content">
<a class="header" href="/angular/#/task/{{ T.Task.id }}">
{{ T.Task.name }}
</a>
<div class="meta">
{{ T.Task.due_date | date : 'dd-MMM-yyyy' }}
</div>
<div class="extra high-priority" ng-if="T.Task.priority == 50">
<i class="circle icon"></i>
<?php echo __('High'); ?>
</div>
<div class="extra medium-priority" ng-if="T.Task.priority == 25">
<i class="circle icon"></i>
<?php echo __('Medium'); ?>
</div>
<div class="extra low-priority" ng-if="T.Task.priority == 0">
<i class="circle icon"></i>
<?php echo __('Low'); ?>
</div>
</div>
</div>
<!-- Termina Creacion de los Items -->
</div>
</div>
</div>
</div>
When income is well DashboardController in angularjs load ng-repeat. Data is correct here.
.controller('DashboardController', function ($scope, $state, $rootScope, $stateParams, $q, $timeout, $http, $sce, $location, Sesion, Dashboard, Fullscreen) {
Dashboard.get_all_tasks().then(function (response) {
$scope.myTasks = response;
});
})
What I need is that when I'm in another controller I can update this ng-repeat. It does not work (data incorrect) here.
.controller('NewTaskController', function ($scope, $state, $rootScope, $stateParams, $q, $timeout, $http, $sce, Sesion, Users, Opportunities, Dashboard) {
Dashboard.get_all_tasks().then(function (response) {
$timeout(function () {
$scope.$apply(function () {
$scope.myTasks = response;
});
});
});
})
Any idea what I'm doing wrong?
You need to implement a service to pass data between controllers. Here is a simplified example. It is in this plunkr here to play with.
var projectModule = angular.module('project',[]);
projectModule.factory('Service', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, Service) {
$scope.thing = Service.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, Service) {
$scope.foo = Service.thing;
$scope.name = "Second Controller!";
}
In this way $scope.thing from the first controller is linked to scope.foo in the second controller via the service using thing
You will need to define the structure of myTasks in the service you define so that all the elements gets passed correctly.
Try implementing this into your project and if you have a specific hangup comment here and we will help but I don't know all your code or structure of myTasks so I'm not giving copy/paste code.
I'm just getting my first steps with angular and stuff, here's my service:
(function() {
'use strict';
angular
.module('timeTracker')
.factory('time', time);
function time($resource) {
// ngResource call to our static data
var Time = $resource('data/time.json');
function getTime() {
// $promise.then allows us to intercept the results
// which we will use later
return Time.query().$promise.then(function(results) {
return results;
}, function(error) { // Check for errors
console.log(error);
});
}
return {
getTime: getTime,
}
}
The 'data/time.json' is pre-filled, I don't have a back-end system yet.
And here's my controller:
(function() {
'use strict';
angular
.module('timeTracker')
.controller('TimeEntry', TimeEntry);
function TimeEntry(time) {
// vm is our capture variable
var vm = this;
vm.timeentries = [];
// Fetches the time entries from the static JSON file
// and puts the results on the vm.timeentries array
time.getTime().then(function(results) {
vm.timeentries = results;
console.log(vm.timeentries);
}, function(error) { // Check for errors
console.log(error);
});
}
})();
So far I've just tried to wire all together in a index.html file, but something keeps going wrong.
My index's body looks like this:
<body ng-app="timeTracker" ng-controller="TimeEntry as vm">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Time Tracker</a>
</div>
</div>
<div class="container-fluid time-entry">
<div class="timepicker">
<span class="timepicker-title label label-primary">Clock In</span>
<timepicker ng-model="vm.clockIn" hour-step="1" minute-step="1" show-meridian="true">
</timepicker>
</div>
<div class="timepicker">
<span class="timepicker-title label label-primary">Clock Out</span>
<timepicker ng-model="vm.clockOut" hour-step="1" minute-step="1" show-meridian="true">
</timepicker>
</div>
<div class="time-entry-comment">
<form class="navbar-form">
<input class="form-control" ng-model="vm.comment" placeholder="Enter a comment">
</input>
<button class="btn btn-primary" ng-click="vm.logNewTime()">Log Time</button>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="col-sm-8">
<div class="well timeentry" ng-repeat="time in vm.timeentries">
<div class="row">
<div class="col-sm-8">
<h4><i class="glyphicon glyphicon-user"></i>
{{time.user_firstname}} {{time.user_lastname}}</h4>
<p><i class="glyphicon glyphicon-pencil"></i> {{time.comment}}</p>
</div>
<div class="col-sm-4 time-numbers">
<h4><i class="glyphicon glyphicon-calendar"></i>
{{time.end_time | date:'mediumDate'}}</h4>
</div>
</div>
</div>
</div>
</div>
</body>
Anyway, I couldn't figure out a way to make this work so far. I keep getting the same error in the console log :
[Error] Error: [$resource:badcfg] Error in resource configuration for action `query`. Expected response to contain an array but got an object
http://errors.angularjs.org/1.3.15/$resource/badcfg?p0=query&p1=array&p2=object
http://localhost/TimeTracker/bower_components/angular/angular.js:63:32
http://localhost/TimeTracker/bower_components/angular-resource/angular-resource.js:587:40
processQueue#http://localhost/TimeTracker/bower_components/angular/angular.js:13248:29
http://localhost/TimeTracker/bower_components/angular/angular.js:13264:39
$eval#http://localhost/TimeTracker/bower_components/angular/angular.js:14466:28
$digest#http://localhost/TimeTracker/bower_components/angular/angular.js:14282:36
$apply#http://localhost/TimeTracker/bower_components/angular/angular.js:14571:31
done#http://localhost/TimeTracker/bower_components/angular/angular.js:9698:53
completeRequest#http://localhost/TimeTracker/bower_components/angular/angular.js:9888:15
requestLoaded#http://localhost/TimeTracker/bower_components/angular/angular.js:9829:24
(anonymous function) (angular.js, line 11655)
(anonymous function) (angular.js, line 8596)
processQueue (angular.js, line 13256)
(anonymous function) (angular.js, line 13264)
$eval (angular.js, line 14466)
$digest (angular.js, line 14282)
$apply (angular.js, line 14571)
done (angular.js, line 9698)
completeRequest (angular.js, line 9888)
requestLoaded (angular.js, line 9829)
So, splitting out the index's body, everything works just fine within the <nav> tag, but not a single dot comes out from the "container".
In your code, you forgot a few lines
(function() {
'use strict';
angular
.module('timeTracker')
.factory('time', time);
function time($resource) {
// ngResource call to our static data
var Time = $resource('data/time.json');
function getTime() {
// $promise.then allows us to intercept the results
// which we will use later
return Time.query().$promise.then(function(results) {
return results;
}, function(error) { // Check for errors
console.log(error);
});
}
return {
getTime: getTime,
}
}
Is missing the lines below:
})();
Working code:
http://embed.plnkr.co/RSIBLVHB8HZ03xPAa0nZ
'use strict'; doesn't allow implicit dependency declaration. Try
angular
.module('timeTracker')
.factory('time', ['$rosource', time]);
and
angular
.module('timeTracker')
.controller('TimeEntry', ['time', TimeEntry]);
or remove the 'use strict';
I have this code to show an alert banner if isBannerVisible is true. But if the value is false the banner still renders for a couple of seconds and then goes away. I have no idea how to prevent this from happening. I tried adding <div style="display:none" data-bind="visible: true"> before it and it doesn't show on isBannerVisible = true or false.
<div data-requisite="mybiz.businesscenter.infobannercomponent" data-bind="if: shouldInitialize">
<div class="alert alert-info alert-dismissable" data-bind="visible: isBannerVisible()">
<button type="button" class="close" data-dismiss="alert" data-bind="click: bannerClose"
aria-hidden="true">
×
</button>
JS.....
var InfoBannerViewModel = function ($el) {
var self = this;
.....
self.isBannerVisible = ko.observable((!dataStore.getItem('isBannerVisible') ? true : dataStore.getItem('isBannerVisible')));
.......
};
var _init = function ($el) {
var infoBannerViewModel = new InfoBannerViewModel($el);
app.bind(infoBannerViewModel, $el);
};
return {
init: _init
};
});
I do agree with #super cool answer in comment above, and here is the example of how to do it:
<div data-requisite="mybiz.businesscenter.infobannercomponent" data-bind="if: shouldInitialize">
<!-- ko if: isBannerVisible() -->
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" data-bind="click: bannerClose"
aria-hidden="true">
×
</button>
</div>
<!-- /ko -->
</div>