I've got simple ng-repeat:
<section id="content" class="container" ng-app="myApp" ng-controller="postsController">
<div class="row">
<div class="col s12 xl6" ng-repeat="post in posts | filter:searchText" on-finish-render="done">
<div class="card">
<div class="card-image">
<img ng-src="{{post.Thumbnail}}" alt="image">
<span class="card-title">{{post.Title}}</span>
</div>
<div class="card-content">
<p>{{post.Excerpt}}</p>
</div>
</div>
</div>
</div>
</section>
Angular code:
var myApp = angular.module('myApp',[]);
myApp.controller('postsController',['$scope', '$http', function ($scope, $http) {
$http.get("api/db.php").
success(function(response) {
console.log(response); //For testing
$scope.posts = response;
console.log("Connected to MySQL server.");
$scope.$on('done', function(ngRepeatFinishedEvent) {
console.log("All content has been loaded :)");
$('.modal-trigger').leanModal();
});
});
}]);
myApp.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(attr.onFinishRender);
});
}
}
}
});
Now the problem is in {{post.Excerpt}} that it's saved in HTML in my database. It works but I've get it in text (like in a ). So my question is how to display it with html?
I read some about ng-bind-html-unsafe but many ppl's said that doesn't work. Any suggestions?
Grettings, W
You can make an filter for it.
filter:
myApp.filter('ashtml', function($sce) { return $sce.trustAsHtml; });
view
<div ng-bind-html="post.Excerpt | ashtml"></div>
Working Demo:
angular.module('myapp', [])
.controller('HelloWorldCtrl', function($scope){
$scope.helloMessage = "Hello A.B";
$scope.post = {};
$scope.post.Excerpt = '<p>hello html</p>';
})
.filter('ashtml', function($sce) { return $sce.trustAsHtml; })
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="HelloWorldCtrl">
<h1 >{{helloMessage}}</h1>
<div ng-bind-html="post.Excerpt | ashtml"></div>
</body>
</html>
Related
I have a problem that has frustrated me, I get the error Error: [ng: areq] Argument 'AppController' is not a function, got undefined, I have not been able to solve it, I have tried many ways but in all of them I get this same error, does anybody know how I can fix it?
my html:
<div class="container app-topmargin" ng-app="sampleAngularApp" ng-controller="AppController">
<div class="row">
<div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-3">
<button class="btn btn-primary" ng-click="openDlg()">Open Modal</button>
</div>
</div>
<ng-include src=""></ng-include>
</div>
my app.js:
var app = angular.module("sampleAngularApp", []);
app.controller("AppController", ["$scope", function ($scope) {
$scope.openDlg = function () {
console.log("clicked here...");
var dlgElem = angular.element("#modalDlg");
if (dlgElem) {
dlgElem.modal("show");
}
};
}]);
Try passing the controller as an argument in the array of your angular module.
var app = angular.module("sampleAngularApp", ['AppController']);
app.controller("AppController", ["$scope", function ($scope) {
$scope.openDlg = function () {
console.log("clicked here...");
var dlgElem = angular.element("#modalDlg");
if (dlgElem) {
dlgElem.modal("show");
}
};
}]);
Your code works fine for me:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="app.js"></script>
<div class="container app-topmargin" ng-app="sampleAngularApp" ng-controller="AppController">
<div class="row">
<div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-3">
<button class="btn btn-primary" ng-click="openDlg()">Open Modal</button>
</div>
</div>
<ng-include src=""></ng-include>
</div>
</body>
</html>
app.js
var app = angular.module("sampleAngularApp", []);
app.controller("AppController", ["$scope", function ($scope) {
$scope.openDlg = function () {
console.log("clicked here...");
};
}]);
Perhaps check the order in which you're loading the scripts.
So im using ngRoute to load different partial html files to my index.html file. The ng-view directive loads the first partial (search.html), and when i click a link in that partial, it loads a second partial (details.html). The link click effectively makes a call (via a controller) to the OMDB API to retrieve a specific movie's details and sets $scope.movieJson = response. When i try to access this in my details.html partial, it doesnt recognise it.
index.html
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="AppCtrl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Movie List - Home</title>
</br>
</br>
<div class="container">
<img class="" src="http://www.movie-list.com/images/logo.png" display="block" margin="auto" width="25%">
</div>
</br>
</br>
</head>
<body>
<div class='container'>
<input class="form-control searchBox" ng-show="show" type="text" name="searchBox" ng-model="movies" ng-change="getMovies()" placeholder="Enter your movie search">
</br>
<h3>Search Again</h3>
<div data.ng-view></div>
<ng-view></ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="controllers/controller.js"></script>
<script src="js/config.js"></script>
<script src="js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
</body>
</html>
controller.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('AppCtrl', function($scope, $routeParams, $http) {
$scope.show = true;
$scope.hide = true;
$scope.getMovies = function() {
console.log("Get movies requested in controller");
$http.get("http://www.omdbapi.com/?s="+$scope.movies+"&y=&plot=full&r=json").success(function(response) {
console.log("Get movies requested in controller");
console.log($scope.movies);
console.log(response);
$scope.moviesJson = response;
});
};
$scope.getMovie = function(Title, err) {
console.log(Title);
$http.get("http://www.omdbapi.com/?t="+Title+"&y=&plot=full&r=json").success(function(response) {
console.log("Get single movie requested in controller");
console.log(response);
$scope.movieJson = response;
window.scrollTo(0, 0);
});
$scope.show = false;
$scope.hide = false;
};
$scope.reloadPage = function() {
window.location.reload();
};
});
config.js
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/search.html',
controller : 'AppCtrl'
})
.when('/details', {
templateUrl : 'partials/details.html',
controller : 'AppCtrl'
})
.otherwise(
{
templateUrl : '<div>No Page</div>'
});
});
search.html
<div class="container" ng-controller="AppCtrl">
<div class="row" vertical-align: middle ng-show="show">
<div class="col-md-10 col-xs-10 col-lg-10">
<div data-ng-repeat="movie in moviesJson.Search" class="col-md-4 col-xs-4 col-lg-4">
<h4>{{movie.Title}}</h4>
<img class="img-responsive" ng-src="{{ movie.Poster || 'https://www.myuniverse.co.in/ABMUPictureLibrary/NoImage.jpg' }}">
</div>
</div>
</div>
</div>
details.html
<div class="container" ng-controller="AppCtrl">
<div class="col-md-10 col-xs-10 col-lg-10">
<table class="table" border="1">
<thead>
</thead>
<tbody>
<tr><h4><strong>Title:</strong> {{movieJson.Title}}</h4></tr>
<tr><h4><strong>Year:</strong> {{movieJson.Year}}</h4></tr>
<tr><h4><strong>Rated:</strong> {{movieJson.Rated}}</h4></tr>
<tr><h4><strong>Released:</strong> {{movieJson.Released}}</h4></tr>
<tr><h4><strong>Runtime:</strong> {{movieJson.Runtime}}</h4></tr>
<tr><h4><strong>Genre:</strong> {{movieJson.Genre}}</h4></tr>
<tr><h4><strong>Director:</strong> {{movieJson.Director}}</h4></tr>
<tr><h4><strong>Writer:</strong> {{movieJson.Writer}}</h4></tr>
<tr><h4><strong>Actors:</strong> {{movieJson.Actors}}</h4></tr>
<tr><h4><strong>Plot:</strong> {{movieJson.Plot}}</h4></tr>
<tr><h4><strong>Language:</strong> {{movieJson.Language}}</h4></tr>
<tr><h4><strong>Country:</strong> {{movieJson.Country}}</h4></tr>
<tr><h4><strong>Awards:</strong> {{movieJson.Awards}}</h4></tr>
<tr><h4><strong>Metascore:</strong> {{movieJson.Metascore}}</h4></tr>
<tr><h4><strong>IMDB Rating:</strong> {{movieJson.imdbRating}}</h4></tr>
<tr><h4><strong>IMDB Votes:</strong> {{movieJson.imdbVotes}}</h4></tr>
<tr><h4><strong>IMDB ID:</strong> {{movieJson.imdbID}}</h4></tr>
</tbody>
</table>
</div>
</div>
app.js
window.addEventListener('hashchange', function() {
console.log("Worked");
});
server.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(express.static(__dirname = '\public'));
app.use(bodyParser.json());
app.get('', function (req, res) {
console.log(req.body);
res.json();
});
app.post('', function(req, res) {
console.log(req.body);
res.json(doc);
});
app.listen(3001);
console.log("Server running on port 3001");
End result
Get rid of ng-controller="AppCtrl"
You are effectively creating 3 different instances , each with it's own scope.
The first is created by the route, then you have 2 nested instances inside that one
I have created a directive which should be able to call a function in a controller and use a variable in controller and directive.
I can not figure out how to call the callback.
I can not figure out to enable two way data binding on my directive scope variable.
Here is the plnk: http://plnkr.co/edit/T1bMYUnkPeZmHHd05SCI?p=preview
html
<!DOCTYPE html>
<html data-ng-app="App">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body data-ng-controller="BodyCtrl">
<h1>{{title}}</h1>
<div class="container">
<div class="dateselector" data-ng-select="select" data-ng-refresh="refresh()"></div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular-route.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
html template
<div class="row">
<div class="col-md-3 col-sm-3">
<select class="form-control" ng-model="select" ng-options="p for p in possibilities"></select>
</div>
<div class="col-md-3 col-sm-3">
<button type="button" class="btn btn-default">Refresh</button>
</div>
</div>
javascript
var app = angular.module('App', ['ui.select']);
app.controller('BodyCtrl', ['$scope', function($scope) {
$scope.title = 'Select Directive';
$scope.select = 1;
$scope.refresh = function() {
alert("Refresh in Controller! " + $scope.select);
};
}]);
// Module
angular.module('ui.select', [])
.directive('dateselector', ['$parse', function($parse) {
var link = function ($scope, $element, $attributes) {
$scope.possibilities = [1,2,3,4,5,6];
$element.find('button').bind('click', function() {
alert('Refresh in directive!');
// How to call callback?
$scope.refresh;
});
};
return {
restrict: 'EC',
replace: true,
templateUrl: 'template.html',
scope: {
select: "=",
refresh: "&"
},
link: link
};
}]);
The basic problem is that your directive expects to see and attribute of the form some-name or data-some-name, but you specify one like this: data-ng-some-name.
Additionally, the recommended way to bind a callback to a button's click event is using ngClick.
<!-- In the VIEW -->
<div class="dateselector" data-select="select" data-refresh="refresh()"></div>
<!-- In the TEMPLATE -->
<button ... ng-click="refresh()">Refresh</button>
See, also, this modified demo.
I have this js
var app = angular.module('MyApp', []);
app.factory('Data', function () {
return {message: "I am data from a service"}
})
app.controller('FirstCtrl', function ($scope, Data) {
$scope.data = Data;
})
app.controller('SecondCtrl', function ($scope) {
})
and this is my html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>index</title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/index.js"></script>
</head>
<body>
<div ng-controller="FirstCtrl" >
<input type="text" ng-model="message"/>
<h2>{{message}}</h2>
</div>
<div ng-controller="SecondCtrl" >
<input type="text" ng-model="message"/>
<h2>{{message}}</h2>
</div>
</body>
</html>
when I run the application, the message I am data from a service is not loaded into the h2 of the first controller although I made the factory and passed it to the controller
You are assigning $scope.data = Data. Then you should access it in the view
<div ng-controller="FirstCtrl" >
<input type="text" ng-model="data.message"/>
<h2>{{data.message}}</h2>
</div>
I have just started learning angularjs. I am trying the tutorial one given on their official website.
http://docs.angularjs.org/tutorial/step_08
What i am trying to achieve is to build multiple views by adding routing.
when i access home.html it is displaying all the mobile list perfectly but once i click on the link to get the details of any of the mobile the next page gives me this error
[$injector:unpr]
do notice there is no unknown provider error
and all the expression on phone-detail.html is being printed as it is not being evaluated.
here is my app.js code
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
then my controller.js code is
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
alert(data);
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams','$http',function($scope, $routeParams,$http) {
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
$scope.phone = data;
});
}]);
home.html code
<html lang="en" ng-app="phonecatApp">
<head>
<title>Hello world example from angular js</title>
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="css/custom.css"/>
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript" src="scripts/controller.js"></script>
</head>
<body>
<div class="row">
<div class="container">
<div ng-view></div>
</div>
</div>
</body>
</html>
phone-list.html code -
<div class="col-lg-12">
<hr>
<p class="pull-right col-lg-4">
<input type="text" ng-model="query" class="form-control col-lg-6" placeholder="Search" style="width:auto;">
<select ng-model="orderProp" class="form-control col-lg-6" style="width:auto;">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
<option value="-age">Oldest</option>
</select>
</p>
<p class="col-lg-6">Total number of phones: {{phones.length}}</p>
<div class="clearfix"></div>
<hr>
<h3 ng-bind-template="Thumbnail view | Search for : {{query}}">List view</h3>
<div class="row">
<div class="col-lg-4" ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<div class="thumbnail">
<a href="#/phones/{{phone.id}}">
<img src="{{phone.imageUrl}}" data-src="{{phone.imageUrl}}" alt="{{phone.name}}">
</a>
<div class="caption">
<h3>{{phone.name}}</h3>
<p>{{phone.snippet}}</p>
</div>
</div>
</div>
</div>
</div>
phone-detail.html code -
<div class="phone-images">
<img ng-src="{{img}}"
class="phone"
ng-repeat="img in phone.images"
ng-class="{active: mainImageUrl==img}">
</div>
<h1>{{phone.name}}</h1>
<p>{{phone.description}}</p>
I got it where was the problem.
It was because i copied content in phone-detail.html from github which should come in a later step. in phone-detail there was some code like
{{phone.hardware.accelerometer | checkmark}}
here checkmark is a filter but i didn't introduced filter at all.
So solution was I added filter.js with content
angular.module('phonecatFilters', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});
then import script.js in home.html and it worked fine.
So i did two mistake -
1. Introducing code for filters without registering any filter.
2. Didn't post the whole code for phone-detail.html so that you can figure out the mistake number one.
A special thanks to #Lorenzo to help me dig out the problem.
As you defined an App module with var phonecatApp = ... you have to use it to create your controllers for Angular to know that phonecatController "belongs to" phonecatApp.
So just replace angular.module with phonecatApp.controller
Replace this line
var phonecatControllers = angular.module('phonecatControllers', []);
//------------------------^-------------^---------------------------
With this
var phonecatControllers = phonecatApp.controller('phonecatControllers', []);
//------------------------^--------------------^---------------------------
Or you can do
angular.module('phonecatApp').controller('phonecatControllers', []);