I have some trouble declaring my controller using ui.router and requirejs.
I'm trying calling route from a variable (menu) to create dynamic route.
See my code below
controller declaration:
var Portal = angular.module('Portal');
Portal.controller('SUSR',['$scope', function($scope)
{
$scope.name = 'This my name';
}]);
this is my loader:
var menu = {
'SUSR':
['ACTIVITY',
'SETTINGS',
'TIMELINE'],
// 'SEU':
// ['MODULE'],
};
var loadController = function(controllerName) {
return ["$q","$rootScope", function($q,$rootScope) {
var deferred = $q.defer();
require([controllerName], function() {
deferred.resolve();
$rootScope.$apply();
});
return deferred.promise;
}];
}
_.each(menu,function(value,key){
var module = baseDirectories + key + '/' + key ;
$stateProvider.state('/' + key,{
url: '/' + key,
templateUrl : module + '.html',
controller: key,
resolve : loadController(module),
});
})
And I'm getting the error below :
Argument 'SUSR' is not aNaNunction, got undefined
Could you please tell me where the problem is?
thanks and regards.
Related
I want to put 'mqtt' value in span. But it doesn't work.
I think the loading method is wrong, but I don't know how to do it.
I don't know if the code below will suffice. Any help would be greatly appreciated.
Someone else coded similar to one page. Someone else's code has a value in 'detail', but my code doesn't. Why?
HTML
span{{ detail }}span //empty with nothing
Front script1
export default {
props: {
detail: {
type: Object
},
isAdd: {
type: Boolean,
default: false
},
},
data() {
return {};
},
mounted() {
this.$mqtt.subscribe('#');
},
methods: {
SendData() {
var temp = [];
var name = Number(document.getElementsByClassName('name').innerHTML);
temp.push(name);
var temp_current = data.payload.Temp_Current;
var error = data.payload.Error;
var data = {
//workcd: this.detail.namemodel,
Temp_Current: temp_current,
Error: error,
};
data = JSON.stringify(data);
var pub_name_arr = this.detail.name.split(' ');
var pub_name = 'CCComandTopic';
this.$mqtt.publish(
pub_name + '/' + pub_name_arr[1] + '/' + pub_name_arr[2],
data,
);
},
}
}
Front script 2
showHotrunner(namemodel, name, data) {
this.$modal.show(
Hotrunner,
{detail: {namemodel, name, data}, isAdd: true},
{width: '1040', height: '700', draggable: true},
);
const canvas = document.getElementById('three-canvas');
canvas.classList.add('noclick');
}
Back
var device = msg.topic.split("/")[2]
if(device == "hopper")
{
var temp_current = msg.payload.Temp_Current
var error = msg.payload.error
msg = {
topic : "CCComandTopic/hopper/1",
payload : {
ID: id,
"Error": error,
Temp_Current: temp_current,
}
}.
node.send(msg)
}
I'm trying to convert a image url from facebook login. I'd like to this task using Vue.
getDataUri(url, callback){
let image = new Image()
image.onload = () => {
let canvas = document.createElement('canvas');
canvas.width = this.naturalWidth
canvas.height = this.naturalHeight
canvas.getContext('2d').drawImage(this, 0, 0)
callback(canvas.toDataUrl('image/png').replace(/^data:image\/(png|jpg);base64,/, ''))
callback(canvas.toDataURL('image/png'))
}
image.src = url
},
retrivePhoto(id){
FB.api('/'+id+'/picture?redirect=false&height=120&width=120','GET',{},
function(response) {
console.log(this.getDataUri(response.data.url));
});
},
When I tried to run the code, I got this javascript error
all.js:108 Uncaught TypeError: this.getDataUri is not a function
The context changed, use arrow functions or Function.prototype.bind to call getDataUri on the right context:
FB.api('/' + id + '/picture?redirect=false&height=120&width=120',
'GET', {}, response => {
console.log(this.getDataUri(response.data.url));
}
);
or
FB.api('/' + id + '/picture?redirect=false&height=120&width=120',
'GET', {}, function(response) {
console.log(this.getDataUri(response.data.url));
}.bind(this)
);
After fixing alot of erros in the testing, now Karma output is this:
PhantomJS 1.9.8 (Windows 8 0.0.0) Controller: MainCtrl should attach a list of t hings to the scope FAILED
Error: Unexpected request: GET /api/marcas
No more request expected at ....
api/marcas is an endpoint i've created. code for MainCtrl:
'use strict';
angular.module('app')
.controller('MainCtrl', function ($scope, $http, $log, socket, $location, $rootScope) {
window.scope = $scope;
window.rootscope = $rootScope
$scope.awesomeThings = [];
$scope.things = ["1", "2", "3"];
$http.get('/api/things').success(function(awesomeThings) {
$scope.awesomeThings = awesomeThings;
socket.syncUpdates('thing', $scope.awesomeThings);
});
$scope.addThing = function() {
if($scope.newThing === '') {
return;
}
$http.post('/api/things', { name: $scope.newThing });
$scope.newThing = '';
};
$scope.deleteThing = function(thing) {
$http.delete('/api/things/' + thing._id);
};
$scope.$on('$destroy', function () {
socket.unsyncUpdates('thing');
});
$http.get('/api/marcas').success(function(marcas) {
$scope.marcas = marcas;
socket.syncUpdates('marcas', $scope.response);
$scope.marcasArr = [];
$scope.response.forEach(function(value) {
$scope.marcas.push(value.name);
});
$scope.marcaSel = function() {
for (i = 0; i < $scope.response.length; i++) {
if ($scope.selectedMarca == $scope.response[i].name) {
$scope.modelos = $scope.response[i].modelos;
};
};
};
});
until you didn't posted your test-code, I guess that your test doesn't includes the following code:
beforeEach(inject(function () {
httpBackend.expectGET('/api/marcas').respond(function(){
return {/*some status code*/, {/*some data*/}, {/*any headers*/}};
});
}));
if the karma-runner tries to execute your test-code, there are to get-requests to the $http-service, $http.get('/api/marcas') and $http.get('/api/things'). if one of these backend calls is not expected, karma cannot run the testcode successfully.
if you don't want to do special stuff for each but only return a default with success code for both calls, you can write so:
beforeEach(inject(function () {
httpBackend.expectGET(/api/i).respond(function(){
return {/*some status code*/, {/*some data*/}, {/*any headers*/}};
});
}));
I'm having a bit of a problem getting a deferred returned from a method in a widget. The method is itself returns a Deferred as it's an xhrPost. The code is as such (using dojo 1.8)
Calling Code:
quorum = registry.byId("quorumPanel");
var deferredResponse = quorum.updateSelectionCount();
deferredResponse.then(function(data){
console.log("Success: ", data);
}, function(err){
console.log("Error: ", err);
});
and the code in the widget:
updateSelectionCount: function() {
var self = this;
var deferredResponse = xhr.post({
url: "ajxclwrp.php",
content: [arguments here],
handleAs: "json"});
deferredResponse.then(function(response) {
var anotherDeferred = new Deferred();
var _boolA = true;
var _boolB = true;
dojo.forEach(response.result, function(relationshipInfo){
[do a bunch of stuff here too set _boolA and/or _boolB]
});
self._sethasRequiredAttr(_hasRequired);
self._setHasRequestedAttr(_hasRequested);
self.quorumInfo.innerHTML = quorumHtml;
// Below is not working
anotherDeferred.resolve('foo');
return anotherDeferred;
});
}
Do I need to set up another promise and use promise/all. Im confused/frustrated at this point.
TIA.
the .then() method returns another deferred. You just need to put a return statement in.
updateSelectionCount: function() {
var self = this;
var deferredResponse = xhr.post({
url: "ajxclwrp.php",
content: [arguments here],
handleAs: "json"});
return deferredResponse.then(function(response) {
var _boolA = true;
var _boolB = true;
dojo.forEach(response.result, function(relationshipInfo){
[do a bunch of stuff here too set _boolA and/or _boolB]
});
self._sethasRequiredAttr(_hasRequired);
self._setHasRequestedAttr(_hasRequested);
self.quorumInfo.innerHTML = quorumHtml;
return "foo";
});
}
I have made up the custom module as :
YUI.add('util', function(Y) {
Y.namespace('com.myCompany');
var NS = Y.com.myCompany;
NS.val = undefined;
}, '3.3.0', {
requires : []
});
What I am trying to do is share this variable val in the instances where I use this module "util". As in
YUI().use("util","node","event",function (Y) {
Y.namespace('com.myCompany');
var MV = Y.com.myCompany;
var setVal = function(e){
MV.val = 10;
}
Y.on("click", setVal,"#one");
});
Now if I want to get this in other instance I am doing as the following:
YUI().use("util","node","event",function (Y) {
Y.namespace('com.myCompany');
var MV = Y.com.myCompany;
var getVal = function(e){
alert(MV.val);
}
Y.on("click", getVal,"#two");
});
But this does not seem to be working. Is there a way to get this behavior. I am doing this only to split up the code.
In this case, you should only create one sandbox. The correct way to break up your code is to use YUI.add to create the modules and specify their dependencies. One way to do this is to structure your code as follows:
// util.js
YUI.add('util', function (Y) {
var NS = Y.namespace('com.MyCompany');
NS.val = null;
}, 'version', {
requires: ['some', 'dependencies']
});
// one.js
YUI.add('one', function (Y) {
var NS = Y.namespace('com.MyCompany');
Y.on('click', function (e) { NS.val = 23; }, '#one');
}, 'version', {
requires: ['util']
});
// two.js
YUI.add('two', function (Y) {
var NS = Y.namespace('com.MyCompany');
Y.on('click', function (e) { alert(NS.val); }, '#two');
}, 'version', {
requires: ['util']
});
// index.html
<button id="one">Set the value</button>
<button id="two">Get the value</button>
<script>
YUI.use('one, 'two', 'node', 'event', function (Y) {
// main application logic here
});
</script>
This allows you to break up your code into separate modules that share the same YUI sandbox instance.
Note also YUI.namespace returns the namespace in question, so you don't need the extra variables.
The problem is that YUI() is creating a new sandbox with each execution. If you want to reuse it you need to capture its value after the first "use" execution and reuse that value later. There may be a better YUish way to do this but I use a global YUI_MAIN:
var YUI_MAIN = YUI().use("util","node","event",function (Y) {
Y.namespace('com.myCompany');
var MV = Y.com.myCompany;
var setVal = function(e){
MV.val = 10;
};
Y.on("click", setVal,"#one");
});
YUI_MAIN.use(function (Y) {
Y.namespace('com.myCompany');
var MV = Y.com.myCompany;
var getVal = function(e){
alert(MV.val);
};
Y.on("click", getVal,"#two");
});
If you really wanted to share between separate sandboxes and avoid an extra global you could use a closure to create a private variable with something like this:
YUI.add('util', (function () {
var privateUtilNS = {};
return function(Y) {
privateUtilNS['val'] = undefined;
Y.setVal = function(e){
privateUtilNS.val = 10;
};
Y.getVal = function(e){
alert(privateUtilNS.val);
};
};
}()), '3.3.0', {
requires : []
});
YUI().use("util","node","event",function (Y) {
Y.on("click", Y.setVal,"#one");
});
YUI().use("util","node","event",function (Y) {
Y.on("click", Y.getVal,"#two");
});