The two script statements below work independently however when they are combined it causes Error: [$injector:unpr] Unknown provider: searchNameFilterProvider <- searchNameFilter Can anyone explain why this occurs?
1st segement
Find Person: <input type="text" ng-model="myName">
<ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
<li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
</ul>
<script>
var app = angular.module('myApp',[]);
app.filter('searchName',function(){
return function (input){
return input + '!';
}
})
</script>
2nd segement
<div ng-controller="myCtrl">
<button ng-click="myFunc()">Hello World Button</button>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function ($scope) {
$scope.myFunc = function () {
console.log('Hello world!');
};
});
</script>
<div ng-app="myApp">
<script src="Scripts/Angular.js" type="text/javascript"></script>
Find Person:
<input type="text" ng-model="myName">
<ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
<li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('searchName', function () {
return function (input) {
return input + '!';
};
});
</script>
<div ng-controller="myCtrl">
<button ng-click="myFunc()">
Hello World Button</button>
</div>
<script>
var app = angular.module('myApp');
app.controller('myCtrl', function ($scope) {
$scope.myFunc = function () {
console.log('Hello world!');
};
});
</script>
There should only be a single module intialization in your code. Fixing the repeated intialization solves the problem.
var app = angular.module('myApp', []);
Here is the documentation from the AngularJS docs.
"Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module"
You could read more about the modules here. AngularJS Modules
var app = angular.module('myApp', []);
app.filter('searchName', function() {
return function(input) {
return input + '!';
}
});
app.controller('myCtrl', function($scope) {
$scope.myFunc = function() {
console.log('Hello world!');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
Find Person:
<input type="text" ng-model="myName">
<ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
<li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
</ul>
<div ng-controller="myCtrl">
<button ng-click="myFunc()">Hello World Button</button>
</div>
</div>
Related
I would like to call a server-side service when my filter is empty.
this is my HTML:
<html lang="en">
<head>
<meta charset="utf 8">
<title>test angular</title>
</head>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<body ng-app="app">
<h1 ng-app="app" ng-controller="HelloWorldCtrl">{{message}}</h1>
<p><input type="text" id="myfilter" ng-model="seachText"></p>
<div ng-app="app" id="search" ng-controller="serviceCall">
<ul>
<li ng-repeat="x in lau | myfilter:seachText">
{{ x.des }}
</li>
</ul>
</div>
and this is my code:
var app = angular.module("app", []);
app.controller("serviceCall", function($scope, $http) {
var v=document.getElementById('search').value;
if (!v){v="Vigo";}
$http.get("http://127.0.0.1/KLAU.pl?search="+v+"&lim=10").then(function(response) {
$scope.lau = response.data;
});
});
app.filter('myfilter', [function($scope){
return function(input, param) {
if(!angular.isDefined(param)) param = '';
var ret = [];
angular.forEach(input, function(v){
var regx=new RegExp(param, 'gi');
if(regx.test(v.des)){
ret.push(v);
console.log("match!!");
}
});
if (!ret.length ){
$scope.serviceCall();
}
return ret;
};
}]);
I'm getting:
typeError: "$scope is undefined".
thanks in advance for the help.
$scope does not work in filter. Better inject a service, or pass the service function as another parameter to the filter:
return function(input, param, serviceCall) {
//...
serviceCall() // replaces $scope.serviceCall();
//...
}
Make sure you define serviceCall in the controller that calls the filter:
app.controller("serviceCall", function($scope, $http) {
var v=document.getElementById('search').value;
if (!v){v="Vigo";}
$scope.serviceCall = function() {
$http.get("http://127.0.0.1/KLAU.pl?search="+v+"&lim=10").then(function(response) {
$scope.lau = response.data;
});
};
$scope.serviceCall();
});
});
In HTML:
<li ng-repeat="x in lau | myfilter:seachText:serviceCall">
I try to make my own filter called myFilter and try to pipe the person array through myFilter. All I get as the output is "Enter name: " followed by a textbox. Even if I try to write letters like A or B or C, nothing gets displayed.
<!DOCTYPE html>
<html>
<head>
<script src
="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Enter name: <input type="text" ng-model="test" /></p>
<ul>
<li ng-repeat="x in person | myFilter">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.filter('myFilter', function()
{
return function(x, test)
{
var i, c=0;
for (i=0; i<test.length; i++)
{
if (x[i] == test[i])
{
c++;
}
}
if (c==test.length)
{
return x;
}
}
});
app.controller('myCtrl', function($scope)
{
$scope.person = ['Alex', 'Buddy',
'Bob', 'Aaron', 'Clay', 'Clayton'];
});
</script>
</body>
</html>
There are a couple of issues here.
Firstly, you're getting an error because test is undefined. This is because your not passing anything in for the value. You need to pass the value into the filter, like so:
<li ng-repeat="x in person | myFilter: test">
But you also need to handle it being null / undefined, because at first it won't have a value, so we also need to add:
if (test == null) {
test = "";
}
Finally, the logic in the filter also needs to change. The value of x will be an array of names. The value of test will be a string. When you're doing if (x[i] == test[i]) that is testing that one of the names == one of the letters in the string.
In my example below, what I do instead is to check that the name starts with what has been typed in, and I remove any that don't.
Here is a working example:
var app = angular.module('myApp', []);
app.filter('myFilter', function() {
return function(x, test) {
var i, c = 0;
// Set default value:
if (test == null) {
test = "";
}
return x.filter(function(name) {
return name.indexOf(test) === 0;
});
}
});
app.controller('myCtrl', function($scope) {
$scope.person = ['Alex', 'Buddy',
'Bob', 'Aaron', 'Clay', 'Clayton'
];
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Enter name: <input type="text" ng-model="test" /></p>
<ul>
<li ng-repeat="x in person | myFilter: test">
{{x}}
</li>
</ul>
</div>
</body>
</html>
This is an AngularJS inheritance code where the inheritance is applied in the functions but there is no output coming for this code.
custDetails and empPaycheck are the two functions where inheritance is applied but the code has some error which I am not been able to find.
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controller Inheritance</title>
<script src="angulaar.min.js"></script>
<script>
var app = angular.module("sample",
[]).run(["$rootScope",function($rootScope){
$rootScope.taxPe`enter code here`rcent = 30;
}]);
app.controller("custDetails", ["$scope",function($scope) {
$scope.Name = "Dipanshu";
$scope.Sal = 45000;
$scope.Dept = "Testing";
}]);
app.controller("empPayCheck", ["$scope", "$rootScope",
function($scope, $rootScope) {
$scope.getTaxes = function() {
return $scope.Sal * $rootScope.taxPercent / 100;
};
$scope.getNet = function() {
return $scope.Sal - $scope.getTaxes();
};
}]);
</script>
</head>
<body ng-app="sample">
<div ng-controller="custDetails">
Employee Details of {{Name}}
<div ng-controller="custDetails">
{{Name}} earns {{Sal}} rs and is in <strong>{{Dept}}</strong>
Department.
<div controller="empPayCheck">
Tax: {{getTaxes()}}
<br> Net Amount: {{getNet()}}
</div>
</div>
</div>
</body>
</html>
You should use $scope.$parent to access parent $scope variables in a child controller.
Also in your HTML code there's a typo where controller should be ng-controller.
Look at the following working example.
var app = angular.module("sample", []).run(["$rootScope", function($rootScope) {
$rootScope.taxPercent = 30;
}]);
app.controller("custDetails", ["$scope", function($scope) {
$scope.Name = "Dipanshu";
$scope.Sal = 45000;
$scope.Dept = "Testing";
}]);
app.controller("empPayCheck", ["$scope", "$rootScope",
function($scope, $rootScope) {
$scope.getTaxes = function() {
return $scope.$parent.Sal * $rootScope.taxPercent / 100;
};
$scope.getNet = function() {
return $scope.$parent.Sal - $scope.getTaxes();
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="sample">
<div ng-controller="custDetails">
Employee Details of {{Name}}
<div>
{{Name}} earns {{Sal}} rs and is in <strong>{{Dept}}</strong> Department.
<div ng-controller="empPayCheck">
Tax: {{getTaxes()}}
<br> Net Amount: {{getNet()}}
</div>
</div>
</div>
</body>
There is error in your module run block near $rootScope.taxPe;
You are using controller attribute instead of ng-controller.
Here is a working code snippet:
var app = angular.module("sample", []).run(["$rootScope", function($rootScope) {
$rootScope.taxPercent = 30;
}]);
app.controller("custDetails", ["$scope", function($scope) {
$scope.Name = "Dipanshu";
$scope.Sal = 45000;
$scope.Dept = "Testing";
}]);
app.controller("empPayCheck", ["$scope", "$rootScope",
function($scope, $rootScope) {
$scope.getTaxes = function() {
return $scope.Sal * $rootScope.taxPercent / 100;
};
$scope.getNet = function() {
return $scope.Sal - $scope.getTaxes();
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="sample">
<div ng-controller="custDetails">
Employee Details of {{Name}}
<div ng-controller="custDetails">
{{Name}} earns {{Sal}} rs and is in <strong>{{Dept}}</strong> Department.
<div ng-controller="empPayCheck">
Tax: {{getTaxes()}}
<br> Net Amount: {{getNet()}}
</div>
</div>
</div>
</body>
P.S.: Personally I would not recommend using $rootScope and scope inheritance, you can use services to share data between controllers. Also would suggest you looking into component API that comes in v1.5+.
I just started to learn Angular, and I tried to make concat var name so I can control it dynamically.
This is what I tried -
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc(1)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe1 = false;
$scope.myFunc = function(x) {
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope.nametocng = !$scope.nametocng;
}
});
</script>
use $scope[variable] for dynamic.
From your comment: In the end, I want to make multiple Toggles, but I want one function for all of them. and then, every button will handle one toggle
You can use ng-repeat for button to handle different menu's
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-repeat="button in array" ng-click="myFunc(button)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza1</div>
<div>Pasta1</div>
<div>Pesce1</div>
</div>
<div ng-show="showMe2">
<h1>Menu:</h1>
<div>Pizza2</div>
<div>Pasta2</div>
<div>Pesce2</div>
</div>
{{nametocng}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.array = [1,2];
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myFunc = function(x) {
angular.forEach($scope.array, function(value, key){
$scope['showMe'+value] = false
});
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope[nametocng] = !$scope[nametocng];
}
});
</script>
</body>
</html>
Please run the above snippet
Here is a DEMO
If you have a dynamic variable name, you need to access via [] syntax. It will evaluate the variable's value and use that value as a property name.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc(1)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe1 = false;
$scope.myFunc = function(x) {
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope[nametocng] = !$scope[nametocng];
}
});
</script>
Try using this
you have keep condition on click and check against concat string
Js code
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.showMe1 = false;
$scope.nametocng = 'showMe1';
$scope.myFunc = function(x) {
var nametocng = 'showMe' + x;
$scope.showMe1 = $scope.nametocng === nametocng; // result will bool
}
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl'>
<button ng-click="myFunc(1)">Click Me!</button>
{{showMe1}} {{nametocng}}
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
</div>
Jsfiddle link
I want to broadcast angular event from javascript function i.e angular.injector(['ng', 'myModule']).get("mySharedService").prepForBroadcast('hello');
By using above line I can invoke prepForBroadcast() but I can't catch event in $scope.$on()
Note: I want to call prepForBroadcast() method from javascript function.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
.question{
border:1px solid darkgray;
padding:10px;
margin-bottom:10px;
}
</style>
</head>
<body>
<div ng-app="myModule">
<div id="appID" ng-controller="ControllerZero">
<input ng-model="message" >
</div>
<div ng-controller="ControllerOne">
<input ng-model="message" >
</div>
<div ng-controller="ControllerTwo">
<input ng-model="message" >
</div>
<my-component ng-model="message"></my-component>
</div>
</body>
<script>
angular.injector(['ng','myModule']).get("mySharedService").prepForBroadcast('hello');
</script>
</html>
script.js file
var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
var sharedService = {};
sharedService.message = '';
sharedService.prepForBroadcast = function(msg) {
console.log('prepForBroadcast');
this.message = msg;
this.broadcastItem();
};
sharedService.broadcastItem = function() {
console.log('broadcastItem');
$rootScope.$broadcast('handleBroadcast');
};
return sharedService;
});
myModule.directive('myComponent', function(mySharedService) {
return {
restrict: 'E',
controller: function($scope, $attrs, mySharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'Directive: ' + mySharedService.message;
});
},
replace: true,
template: '<input>'
};
});
function ControllerZero($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
console.log('handle event');
$scope.message = sharedService.message;
});
}
function ControllerOne($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'ONE: ' + sharedService.message;
});
}
function ControllerTwo($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'TWO: ' + sharedService.message;
});
}
ControllerZero.$inject = ['$scope', 'mySharedService'];
ControllerOne.$inject = ['$scope', 'mySharedService'];
ControllerTwo.$inject = ['$scope', 'mySharedService'];
angular.injector() creates a new injector, and with it a new $rootScope. The event will be broadcasted on this new $rootScope instead of on the one your controllers are listening on.
You need to retrieve the injector already associated with your application:
angular.element(domElement).injector();
You also need to manually trigger the digest loop for the data bindings to update, for example by using $apply.
Example:
angular.element(document).ready(function() {
var element = angular.element(document.querySelector('.ng-scope'));
var injector = element.injector();
var scope = element.scope();
scope.$apply(function() {
injector.get('mySharedService').prepForBroadcast('hello');
});
});
Demo: http://plnkr.co/edit/NDKBdzSmvN1xY7alafir?p=preview
Another way of publishing events from one controller and listening them in other controllers would be to use angular-PubSub module.
The PubSub makes only subscribers to listen to the published events unlike the $rootScope.$broadcast in which it sends event to all the Scopes in Scope hierarchy making it inefficient as compared to the PubSub approach.