I am trying to implement a custom filter. I am getting a dependency error from angularjs.
Below is my code:
angular.module('Test', [])
.controller('TestController', ['$scope', function ($scope) {
$scope.myDate = 1456106575956;
}])
.filter('utcToDate', function(pUTCString) {
return function(pUTCString) {
return new Date(pUTCString);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Test" ng-controller="TestController">
{{myDate | utcToDate:myDate }}
</body>
Your JS should be
angular.module('Test', [])
.controller('TestController', ['$scope', function ($scope) {
$scope.myDate = 1456106575956;
}])
.filter('utcToDate', function() {
return function(pUTCString) {
return new Date(pUTCString);
}
});
HTML is fine, but can also be written as
<body ng-app="Test" ng-controller="TestController">
{{myDate | utcToDate }}
</body>
What went wrong?
You're not required to specify a parameter while defining the function for a custom filter as you have done here
.filter('utcToDate', function(pUTCString) {
More on filters from the official documentation.
Here is a Working Demo
Related
The first time I used angular.js, using http request to dynamically render data, I encountered such a strange problem, there is no problem with the following code alone, but if you put it in the page I want to do , it will give an error:
Error: [ng:areq] Argument 'customersCtrl' is not a function, got undefined
But I have defined customersCtrl,
<div ng-controller="customersCtrl">
This is my code:
<div ng-app="myApp" >
<div ng-controller="customersCtrl">
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:17900/flower/flowers?flowerName")
.then(function (result) {
$scope.names = result.data.body;
});
});
</script>
</div>
You must define the <script> tag outside of the ng-app element. Should you use inline js, the script tag must be defined before the ng-app element.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = ["Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas"]
// $http.get("http://localhost:17900/flower/flowers?flowerName")
// .then(function (result) {
// $scope.names = result.data.body;
// });
});
</script>
<div ng-app="myApp">
<div ng-controller="customersCtrl">
<p ng-repeat="name in names">{{name}}</p>
</div>
</div>
Note
I recommend you to use version 1.7.5
The problem is you include the angular controller in html tags before you define it, So angular compiler could not find the customersCtrl as function.
Edit Your code like this :
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl',['$scope','$http' function($scope, $http) {
$http.get("http://localhost:17900/flower/flowers?flowerName")
.then(function (result) {
$scope.names = result.data.body;
});
}]);
</script>
<div ng-app="myApp" >
<div ng-controller="customersCtrl"></div>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myMarkup"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myMarkup = "<h1>Hi {{name}}</h1>";
$scope.name="Habib";
});
</script>
Comming Output:
Hi {{name}}
Desired Output:
Hi Habib
You can compile the $scope variable with a directive and hence you do not need ngSanitize
DEMO
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$sce) {
$scope.myMarkup = "<h1>Hi {{name}}</h1>";
$scope.name="Habib";
$scope.trustAsHtml = function(html){
return $sce.trustAsHtml(html);
}
});
app.directive('compileTemplate', function($compile, $parse){
return {
link: function(scope, element, attr){
var parsed = $parse(attr.ngBindHtml);
function getStringValue() {
return (parsed(scope) || '').toString();
}
// Recompile if the template changes
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope); // The -9999 makes it skip directives so that we do not recompile ourselves
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="trustAsHtml(myMarkup)" compile-template></p>
</div>
You shoud use $interpolate like this: (Notice you must declare the interpolated value before the markup)
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope, $interpolate) {
$scope.name = "Habib";
$scope.myMarkup = $interpolate("<h1>Hi {{name}}</h1>")($scope);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-sanitize.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myMarkup"></p>
</div>
app.controller("myCtrl", function($scope,$interpolate) {
$scope.name="Habib";
$scope.myMarkup = $interpolate('<h1>Hi {{name}}</h1>')($scope);
});
Try with above code. Might help!! $compile is an alternative of $interpolate. You can try that too.
I get this error - Error: $controller:ctrlreg A controller with this name is not registered. All of my scripts are loaded, and I added them all in index.html.
All scripts are loaded
My controller:
(function() {
angular.module("nsoftModule").controller("nsoftController", ["nsoftService", function(nsoftService) {
var self = this;
self.service = nsoftService;
}])
})();
My directive:
(function() {
var weatherMod = angular.module("nsoftModule", []);
weatherMod.directive("nsoftDirective", function() {
return {
templateUrl: "Template/weatherTemplate.html",
controller: "nsoftController as nsoftCtrl"
}
});
})();
My service:
(function() {
var weatherMod = angular.module("nsoftModule", []);
weatherMod.service("nsoftService", ["http", function(http) {
var service = this;
}]);
})();
My module:
(function() {
var weatherMod = angular.module("nsoftModule", []);
})();
My template:
<div class="container">
<div ng-controller="nsoftController">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</div>
My app.js:
(function() {
angular.module("nsoftApp", ["nsoftModule"]);
})();
And my index.html:
<!DOCTYPE html>
<html ng-app="nsoftApp">
<head>
<title>Nsoft App</title>
</head>
<body>
<nsoft-directive></nsoft-directive>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="weatherModule.js"></script>
<script src="Service/weatherService.js"></script>
<script src="Controller/weatherController.js"></script>
<script src="Directive/weatherDirective.js"></script>
<script src="app.js"></script>
</body>
</html>
just remove the global variable because in you are using anonymous self invoking function variable is only limited to one anonymous function. use like his
(function() {
angular.module("nsoftModule").controller("nsoftController", ["nsoftService", function(nsoftService) {
var self = this;
self.service = nsoftService;
}])
})();
(function() {
angular.module("nsoftModule").directive("nsoftDirective", function() {
return {
templateUrl: "Template/weatherTemplate.html",
controller: "nsoftController as nsoftCtrl"
}
});
})();
//change http to $http
(function() {
angular.module("nsoftModule").service("nsoftService", ["$http", function($http) {
var service = this;
}]);
})();
(function() {
angular.module("nsoftModule", []);
})();
since controller assign from the directive no need to declare it in the html also
<div class="container">
<div >
<p>Name : <input type="text" ng-model="nsoftCtrl.name"></p>
<h1>Hello {{nsoftCtrl.name}}</h1>
</div>
(function() {
angular.module("nsoftApp", ["nsoftModule"]);
})();
I have got a problem with calling a controller(not just a function) from another controller. My HTML looks like:
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<div id="msg"></div>
</div>
</div>
And the script:
var module = angular.module('MyApp', []);
module.controller('MyCtrl', [function() {
angular.element(document).ready(function () {
test();
});
}]);
module.controller('test', [function() {
document.getElementById('msg').innerHTML = 'Hello';
}]);
Please see the jsfiddle here: http://jsfiddle.net/y35emhny/
Is there any way how I can achieve it?
I have a situation where I'm using an ng-repeat to display a directive, and this directive is responsible for calculating a sub-total and using 2-way binding to add that sub-total to my total.
However, by using the ng-repeat, it's adding to the scope of the ng-repeat instead of my controller. How can I get this to work correctly?
Edit: I figured out a solution, but not sure if it's the best way to do it...
I changed:
<div ng-repeat='item in myArray'>
<add-it-up sub-total='total1'></add-it-up>
</div>
to
<div ng-repeat='item in myArray'>
<add-it-up sub-total='$parent.total1'></add-it-up>
</div>
and it's working. Is there a better way to do this?
Plunker: http://plnkr.co/edit/lqh0z93yc5Q5E2gNBdtG?p=preview
<!DOCTYPE html>
<html ng-app='testApp'>
<head>
<script data-require="angular.js#1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
</head>
<body ng-controller='TestCtrl'>
<!-- This doesn't work -->
<div ng-repeat='item in myArray'>
<add-it-up sub-total='total1'></add-it-up>
</div>
{{total1}}
<br />
<!-- This does work -->
<add-it-up sub-total='total2'></add-it-up>
<add-it-up sub-total='total2'></add-it-up>
<add-it-up sub-total='total2'></add-it-up>
{{total2}}
<script>
var app = angular.module('testApp', []);
app.controller('TestCtrl', ['$scope', function($scope) {
$scope.myArray = [0, 1, 2];
$scope.total1 = 0;
$scope.total2 = 0;
}])
app.directive("addItUp", function () {
return {
restrict: 'E',
scope: {
subTotal: "="
},
controller: ['$scope', '$timeout', function ($scope, $timeout) {
$timeout(function() {
console.log($scope.subTotal)
$scope.subTotal += 5;
console.log($scope.subTotal)
})
}]
}
})
</script>
</body>
</html>
You have to add an object to your $scope containing the total1. Otherwise this property gets overwritten by the ng-repeat sub-scopes:
$scope.totals = {
total1: 0,
total2: 0
};
Have a look at this updated plnkr. For more information visit Understanding Scopes.