I have the following html page
<input type="text" value="Doe">
<h3>Search Result</h3>
<div class="list-group">
<search-result></search-result>
<search-result></search-result>
</div>
and here is my angular directive
var app=angular.module('App',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'pages/main.html',
controller:'mainController'
})
})
myApp.directive("searchResult", function() {
return {
template: '<h4 class="list-group-item-heading">Doe, John</h4><p class="list-group-item-text">555 Main St., New York, NY 11111</p>'
}
});
The problem is, when I load the page the custom directive does not appear in my page. There is no error in console.I checked the inspect -> Element in the browser. It has the <search-result></search-result> but it seems that, it is ignored.
How can i fix it?
Instead of this
myApp.directive("searchResult", function()
it should be
app.directive("searchResult", function()
Related
I have the following code structure
index.html
<body ng-app="jobPortalApp" ng-controller="mainController">
<div ui-view></div>
</body>
then following is my homepage.html template
<div id=header>
</div>
<div ui-view>
<input type="text" ng-model="test">Test</input>
<input type="submit" ng-click="signup()">
</div>
<footer>
</footer>
my angular module file is as follows
var jobPortalApp = angular.module('jobPortalApp',['ui.router']);
jobPortalApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider
.otherwise('/');
$stateProvider
.state('home',
{
url:'/',
templateUrl: './templates/homepage.html',
controller: 'controllerHome'
})
}).controller('mainController', function(){});
following is my home controller
jobPortalApp.controller('controllerHome',function($scope, $http) {
$scope.test="";
$scope.signup = function() {
console.log($scope.test);
}
});
Required:
I want the changed value of test in my controllerHome after the user clicks on signup
Problem:
console.log outputs blank and if I remove $scope.test="";then outputs undefined. I want the changed value of test in my controller.
You usually shouldn't bind directly to $scope due to issues with prototypal inheritance. When trying to read a value from a child scope, if the value doesn't exist you end up reading from the parent scope. But as soon as you write, you write to the child scope. Does it work if you bind to an object instead?
$scope.data = {
test: ""
};
<input type="text" ng-model="data.test">Test</input>
As an alternative, you may also want to look at the controllerAs option for your route:
controllerAs: "ctrl"
Then in your controller:
this.test = "";
And in your template:
<input type="text" ng-model="ctrl.test">Test</input>
I am using Angular bootsrap modal service. version of ui-bootstrap is angular-ui-bootstrap 1.3.3. below is my code.
First on module , I have registered correctly.
var angularFormsApp = angular.module("angularFormsApp", ["ngRoute", "ui.bootstrap"]);
then on angular controller , I have injected this directive correctly.
var loginController = function ($scope, $window, $routeParams, $uibModal, DataService)
then I am calling this modal by following code inside same controller
var onError = function (reason) {
$scope.modalOptions.headerText = "Error";
$scope.modalOptions.bodyText = reason.statusText;
$uibModal.open({
templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'loginController'
});
};
$scope.cancelForm = function () {
$uibModalInstance.dismiss('cancel');
};
Now as you can see I have created separate html file for modal and below is html
<div class="modal-header">
<h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" value="Close"
ng-click="cancelForm()" />
</div>
Now till here everything is working , I mean on error method , modal is showing but problem is its showing blank , even nothing happening on close button click.
There is no error in console of chrome browser. Here is screen shot.
Your Modal does not know about your controller's scope. Try changing to this:
$uibModal.open({
templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
scope: $scope
});
To use your current controller variables try to change
controller: 'loginController' to scope: $scope. It will pass current scope to the modal.
Similar problem was here: AngularJS passing data to bootstrap modal
When I click on the button and AngularJS call routing for loading the details page. Why when I back to the home page (back button on browser) Select element on html lost value and list of people?
this is my code:
HTML
<div ng-app>
<h2>Test</h2>
<div ng-controller="MainCtrl">
<select ng-options="people.id as people.name for people in peoples" ng-model="test">
<option value="">Select People...</option>
</select>
<span class="fa fa-edit"></span> Details
</div>
</div>
CONTROLLER:
function MainCtrl($scope) {
$scope.peoples = [
{id: '1', name: 'Jon'},
{id: '2', name: 'Peter'}
];
}
APP.JS:
App.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/details/:id', {
templateUrl: configuration.appPartialPath + 'details.html',
controller: 'DetailsCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
Controllers in Angular are created on demand. When you leave a view managed by a controller it is destroyed along with its scope and a new one is created when entered the same view again. If you want to keep your scope data you will have to put it in somewhere else.
Since Angular services are singletons they can be use for that purpose. All you need to do is to inject such a service into your controller and bind it to a scope variable exposed to a view. Every time a new controller is created the same service with your data will be injected into it.
I want to two way bind with ng-model directive AFTER the ngview has loaded. Is this possible?
app.js
app.controller('FormController', function($scope) {
$scope.data = {
header = 'Header',
}
});
index.html
<div ng-controller="FormController">
Header: <input type="text" ng-model="data.header"> {{data.header}}
</div>
Which works fine. What I want to do is do the exact same thing after ng-view
within ng-view I would put
{{data.header}}
and it would say "Header" but does not bind the data.
Hopefully I explained the problem clearly. Any ideas?
here is a working example
In your script:
declare ngRoute as a dependency
use $routeProvider inside a config block to declare your routes
I use inline template only for simplicity (In real apps I use templateUrl)
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider.when('/',{
template: "Header: <input type='text' ng-model='data.header'> {{data.header}}",
controller: "ctrl"
});
});
app.controller('ctrl',function($scope){
$scope.data = {
header : 'Header'
};
});
In your html:
Add angular-route.js to your scripts
Add a ng-view directive
Here is the jsfiddle.
http://jsfiddle.net/CLcfC/
code
var app = angular.module('app',['']);
app.controller('TestCtrl',function($scope){
$scope.text = 'Change Me';
$scope.$watch('text',function(){
alert('Changed !');
});
})
HTML
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="TestCtrl">
<input type="text" ng-model='text'/>
<span>{{text}}</span>
</div>
</div>
I am not able to see the change in $scope.text. Please help.
This is so easy but what am I missing?
Change the module creation to this, make sure you don't put a empty string in the []. (Obvious the empty string is not a module that can be injected.)
var app = angular.module('app', []);
Demo: http://jsfiddle.net/MWa66/
Your JavaScript file loads after the AngularJS initialization and that's why it fails to find your module. In order to fix it change the initialization to a manual initialization.
First change your HTML and remove the ng-app directive:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div id="appRoot">
<div ng-controller="TestCtrl">
<input type="text" ng-model='text'/>
<span>{{text}}</span>
</div>
</div>
Then go to your JavaScript and use angular.bootstrap method to manually attach your module:
var app = angular.module('app',[]);
app.controller('TestCtrl',function($scope){
$scope.text = 'Change Me';
$scope.$watch('text',function(){
alert('Changed !');
});
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('appRoot'), ['app']);
});
You can find more help on manual AngularJS initialization here.
Thank you! I solved this annoying thing!
The solution that worked for me was that I use angular UI router and there I had used the following code
.state('app.monimes', {
url: "/monimes",
views: {
'menuContent' :{
templateUrl: "templates/monimes.html",
controller: 'sampleCtrl'
}
}
})
so then in the controller I had
/***
*
*Controller for tests..
*/
.controller('sampleCtrl',['$scope','sampleService', function($scope, $sampleService) {
$scope.username="em";
// Watch for changes on the username property.
// If there is a change, run the function
$scope.$watch('username', function(newUsername) {
// uses the $http service to call the GitHub API
// //log it
$scope.log(newUsername);
// and returns the resulting promise
$sampleService.events(newUsername)
.success(function(data, status, headers) {
// the success function wraps the response in data
// so we need to call data.data to fetch the raw data
$scope.events = data.data;
});
},true);
}
]);
and in the view I had
<div>
<label for="username">Type in a GitHub username</label>
<input type="text" ng-model="username" placeholder="Enter a GitHub username, like a user" />
<pre ng-show="username">{{ events }}</pre>
</div>
but that didn't work.
so I added ng-controller="sampleCtrl"
to the div and now it works :D
so that means that the view is loaded after the controller loads and the watcher doesn't get added to the watching variable.