When I wanna use the createHash function in angular, this error raises : md5.createHash is not a function
Here's my code :
MyCtrl.$inject = ['md5'];
function MyCtrl(md5) {
var vm = this;
vm.reg = reg;
function reg() {
vm.avatar = md5.createHash('salam'); // This Line Has Error
console.log(vm.avatar);
...
Note: I added the module dependency fine !
You need to add angular-md5 to your project module as well le below.
angular.module('YOUR_APP', [
'angular-md5', // you may also use 'ngMd5' or 'gdi2290.md5'
'controllers'
]);
Not sure what happened, but you might be able to backtrack from a fiddle I made you
<body ng-app="YOUR_APP" ng-controller="MainCtrl">
<img src="http://www.gravatar.com/avatar/{{ email | gravatar }}.jpg?d=identicon">
<input type="text" ng-model="email" placeholder="Message Here"> {{ message }}
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-md5/0.1.10/angular-md5.js"></script>
<script>
var app = angular.module('YOUR_APP', [
'angular-md5', // you may also use 'ngMd5' or 'gdi2290.md5'
]).controller('MainCtrl', function($scope, md5) {
$scope.$watch('email', function(val) {
$scope.message = 'Your message Hash is: ' + md5.createHash($scope.email || '');
});
});
</script>
`
Related
I tried to set an angularjs model value from a Javascript code but it doesn't work. I always get an empty value for that property. Below is a snippet of my html code:
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformScripts: true,
usePlatformStyles: true
});
VSS.ready(function () {
console.log("Organization name " + VSS.getWebContext().account.name);
var scope = angular.element(document.querySelector('#hubContainer')).scope();
scope.$apply(function () {
scope.DashboardModel.AccountKey = VSS.getWebContext().account.name;
})
});
</script>
<div class="ng-cloak tree-master-wrapper">
<div id="hubContainer" class="ng-scope" data-ng-controller="MyController">
Some code comes here…….
</div>
But for some reasons the console.log(“AccountKey “ + $scope.DashboardModel.AccountKey) is empty. Any idea? I using https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js
I was able to resolve this by adding this entry to "MyController":
MyModule.controller('MyController', ['$scope', function($scope){
$scope.DashboardModel = new DashboardModel();
var checkPermission = function (selectedTeam) {
VSS.require(["VSS/Service", "VSS/Security/RestClient"],
function(VSS_Service, Security_RestClient) {
$scope.DashboardModel.AccountKey = VSS.getWebContext().account.name;
});
});
}
I'm trying to get the value of my ng-model input to my controller. The input value has a value and not empty.
Why this code is not working? It says undefined when you alert or console log. What did i missed? really appreciate your help. here is my code
input --> the value is 1
<input type="text" name="idval" ng-model="Data.idval">
js
app.controller('Controller', function($scope, $http){
$scope.fetchvalue = function(){
var id = $scope.Data.idval; // not working
var id = $scope.idval; // even this one
alert(id); // its undefined
$http.post(
"query.php", {
'ID': id,
}
).then(function(response) {
console.log(response.data);
});
}});
Here is a working solution for your code:
You need to declare an object and bind it to ng-model,
$scope.Data = {};
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.Data = {};
$scope.fetchvalue = function(){
var id = $scope.Data.idval; // not working
alert(id); // its undefined
}
});
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
<input type="text" name="idval" ng-model="Data.idval">
<button ng-click="fetchvalue()">Submit</button>
</form>
</div>
</body>
</html>
Here is a working Plunker
I understand,
see you defined id twice, first id get the value from ng-model which must be assigning ng-model value to id variable and you override id with undefined variable called idval.
You can either remove line var id = $scope.idval; or
modify alert(id); as alert($scope.Data.idval)
You need to declare it somewhere before you use it.
$scope.DATA = ""
var id = $scope.Data.idval;
Try this out
I'm learning AngularJS from W3SCHOOLS, and I am facing this problem over and over again!
In the following code uncommentated lines of controller code are written by me and
multiple comment lines copied from W3SCHOOLS (Angular Controllers) .
When I run this program, uncommented code doesn't work, and if i use commented code instead , program works fine.
I am not getting this because I am not seeing any difference between these two blocks!
<html>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
//controller code
app.controller = ('person', function($scope){
$scope.fname = "Kiran";
$scope.lname = "Chaudhari";
$scope.fullname = function(){
return $scope.fname + " " + $scope.lname;
};
});
/*app.controller('person', function($scope) {
$scope.fname = "Kiran";
$scope.lname = "Chaudhari";
$scope.fullname = function() {
return $scope.fname + " " + $scope.lname;
};
});*/
</script>
<body>
<div ng-app="myApp" ng-controller="person">
First Name : <input type="text" ng-model="fname">
Last Name : <input type="text" ng-model="lname">
<br>
Full Name : {{fullname()}}
</div>
</body>
</html>
You don't have to put equals sign beside app.controller.. I think this is the thing blocking your code.. hope this will help.
app.controller = ();
"=" there should be no equal sign in this syntax of AngularJS
I am learning Angular using W3Schools.
I just modified an example about "Services"... The following is the code:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p><input type="text" ng-model="num"></p>
<h2>{{num}}</h2>
<h1>{{hex}}</h1>
</div>
<p>A custom service whith a method that converts a given number into a hexadecimal number.</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.num = 200;
$scope.hex = hexafy.myFunc($scope.num);
});
</script>
</body>
</html>
When I update the textbox, the "HEX" part is not updating. Why?
Your hexafy.myFunc is called only once when the controller is initialized, hence only the initial value is converted to hex. If you want a function to be called on the value change of a scope variable in runtime, you need filters. AngularJS has a lot of inbuilt filters that are ready to use.
You can also define a custom filter, just like you define services or controllers.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p><input type="text" ng-model="num"></p>
<h2>{{num}}</h2>
<h1>{{num | hexafy}}</h1>
</div>
<p>A custom filter that converts a given number into a hexadecimal number.</p>
<script>
var app = angular.module('myApp', []);
app.filter('hexafy', function() {
return function (x) {
return Number(x).toString(16); // Also convert the string to number before calling toString.
}
});
app.controller('myCtrl', function($scope) {
$scope.num = 200;
//$scope.hex = hexafy.myFunc($scope.num);
});
</script>
</body>
</html>
Further reading: AngularJS Filters
NOTE: A filter is a good idea if you're gonna be using the hexafy functionality at multiple places in/across views. Otherwise, it is just an overkill and the $scope.$watch method will work fine for you, as described in other answers
$scope.hex is not updating because there're no way for it update itself.
The hexafy.myFunc is called only once when the controller is loaded for the first time.
If you want want the $scope.hex property to change with num, you might need a watch on the num property.
$scope.$watch('num', function(newVal, oldVal) {
$scope.hex = hexafy.myFunc($scope.num); /// or newVal
}
The function passed in $scope.$watch will be called everytime the value of $scope.num changes.
for more info see https://docs.angularjs.org/api/ng/type/$rootScope.Scope (the watch section)
Hope it helps.
No need of a service here, you can simple use $watch on the num. See below code snippet, it will update your ui, I have updated your controller code, please check.
app.controller('myCtrl', function($scope, hexafy) {
$scope.num = 200;
$scope.hex = "some default val";
$scope.$watch('num', function(newValue, oldValue) {
$scope.hex = newValue.toString();
});
});
Your Text box is only bind to 'num'. '$scope.hex is not binded to your text box'. So that it is not update when you typing text. You could use '$watch' on 'num'. Read here
app.controller('myCtrl', function($scope, hexafy) {
$scope.num = 200;
$scope.$watch('num', function() {
$scope.hex = hexafy.myFunc(parseInt($scope.num));
});
});
We have this:
<td ... ng-click="someFunction(param)" ...></td>
The function is defined in one of the controllers in controllers.js:
$scope.someFunction= function (param) { ... }
and the param is expected to be translated string. I tried different approaches, e.g.:
<td ... ng-click="someFunction('PARAM_TRANSLATION_KEY' | translate)" ...></td>
or:
<td ... ng-click="someFunction({{'PARAM_TRANSLATION_KEY' | translate}})" ...></td>
and also others, but nothing seems to be working and I couldn't find this in the angular-translate documentation and/or I-net.
Any ideas?
angular translate has a translation service that you can use inside your js code ,
https://angular-translate.github.io/docs/#/api/pascalprecht.translate.$translate
simply pass the function as
ng-click="someFunction('PARAM_TRANSLATION_KEY')
and use the service inside the function like so:
function(param) { $translate(param).then(translation) { ... } }
UPDATE : if you cant change the code then you can pass the param like so
Add the service to the scope so you can access it
Use the service to translate and call your function after callback
Example:
var translations = {
HEADLINE: 'What an awesome module!',
PARAGRAPH: 'Srsly!',
NAMESPACE: {
PARAGRAPH: 'And it comes with awesome features!'
}
};
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider',
function($translateProvider) {
// add translation table
$translateProvider
.translations('en', translations)
.preferredLanguage('en');
}
]);
app.controller('myController', function($scope, $translate) {
$scope.translationServiceCallback = function(param, cb) {
$translate(param).then(function(translation) {
cb(translation);
});
}
$scope.log = function(param) {
console.log(param)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.11.1/angular-translate.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<div>
<button ng-click="translationServiceCallback('HEADLINE',log)">Translate</button>
<button ng-click="log('HEADLINE')">WYSIWYG</button>
</div>
</div>
</div>