I have a controller which gets activated by a route (see below) I would like to create a directive that uses this data (once loaded) but I have no idea how to pass this data/bind it.
This is my controller:
app.controller("CampaignData" , ['$scope', 'Restangular', 'CbgenRestangular', '$http', '$q',
function($scope, Restangular, CbgenRestangular, $http, $q){
var campaign_call = CbgenRestangular.one('api/v1/campaign', "testcamp").get();
$q.when(campaign_call.then(
function(campaign) {
$scope.campaign = campaign;
console.log(campaign);
}
))
.then(function(){
var cars = $http({method: 'GET', url:$scope.campaign.carlot});
cars.then(function(reward){
// do success things here
console.log(reward.data)
},
function(reward){
//do error things here
});
})
}]);
Then in my template I want to do something like this
{{ campaign.name }} {{ car.name }}
or even this
<campaign="name"></campaign>
<campaign="car.name"></campaign>
How can this be done?
I would not like to create a directive that uses this data
There is no need to create a directive. Once you declare a template and controller in the route config, all the scoped properties within the controller will become active for the template.
Interpolation like this should then work fine:
<div>{{ campaign.name }}</div>
<div>{{ car.name }}</div>
If you wanted to handle a click event on one of the divs, it would look like this:
<div ng-click="myFunctionInController(campaign.name)">{{ campaign.name }}</div>
This function would then be defined in the controller like this:
$scope.myFunctionInController = function(name) {
console.log(name);
}
Related
I want to set a class based on the boolean that I set in a service. This is a simplified version from my code (for the sake of readability). The boolean is normally set by a lot of other functions in this service.
HTML :
<div ng-controller="MainController">
<div ng-class="{ 'green' : MainController.CustomService.isGreen }">
</div>
</div>
Service :
App.service("CustomService", function() {
this.isGreen = true;
})
Controller :
App.controller('MainController', ['$scope', 'CustomService', function($scope, CustomService) {
}]);
Try this way:
App.controller('MainController', ['$scope', 'CustomService', function($scope, CustomService) {
$scope.isGreen = CustomService.isGreen;
}]);
HTML:
<div ng-class="{ 'green' : isGreen }">
View does not have direct access to service. View has access to $scope object, So if you need something in view, you shall write in $scope first.
If you want to track color:
App.controller('MainController', ['$scope', 'CustomService', function($scope, CustomService) {
$scope.isGreen = function () {
return CustomService.isGreen;
};
}]);
And:
<div ng-class="{ 'green' : isGreen() }">
Only properties of $scope are accessible to the view. So when you say MainController.CustomService.isGreen in the view, Angular tries to access $scope.MainController.CustomService.isGreen, which does not exist. You should publish the service to the scope in your controller.
App.controller('MainController', ['$scope', 'CustomService', function($scope, CustomService) {
$scope.CustomService = CustomService;
}]);
Then you can access your service from the view like this:
<div ng-class="{ 'green' : CustomService.isGreen }">
</div>
Another slightly different, more popular approach is to instruct the controller to publish itself in the scope. You do this by tweaking the ng-controller value to MainController as $ctrl (the name could be anything but Angular 1.5 standardized $ctrl). Then $ctrl becomes available in your view:
<div ng-class="{ 'green' : $ctrl.CustomService.isGreen }">
</div>
In the controller function, $ctrl corresponds to this, so to publish the service, you would do:
App.controller('MainController', ['CustomService', function(CustomService) {
this.CustomService = CustomService;
}]);
Notice you don't need to inject $scope as a parameter now.
I'm using ui-router with angularjs. I want to write a template for a view that will show a image depending on what the view is. here's my example state.
$stateProvider
.state('index', {
url: "",
views: {
"topStormtrooper": {
templateUrl: '/components/stormtroopers/stormtroopers.html',
controller: "stormtroopersCtrl"
},
"bottomStormtrooper": {
templateUrl: '/components/stormtroopers/stormtroopers.html',
controller: "stormtroopersCtrl"
}
}
})
my controller looks like this
.controller('stormtroopersCtrl', ['$scope', '$http', '$stateParams', function ($scope, $http, $stateParams) {
//
$scope.stormtrooper = $stateView; //it should be something like this hopefully
}]);
The template is all the same just the image will be different depending which view it is loaded into. Currently I just added a new controller for each view and load the image based on that. But I feel like I should be able to do this with just one controller and the controller should be able to detect what the view is. I know you can detect the state but I want go deeper and get the view.
Any Ideas?
You can access the current state configuratin object like this:
$state.current
For further information take a look at the $state
You can listen to the $viewContentLoaded function in your controller as per the ui-router documentation
For example:
.controller('stormtroopersCtrl', ['$scope', '$http', '$stateParams', function ($scope, $http, $stateParams) {
$scope.$on("$viewContentLoaded",function(event,viewName){ //listen for when the content is loaded into the view
$scope.currentView = viewName; //assign the view name in a model
console.log($scope.currentView);
//do something because you got the view name now....
});
}]);
You do not need to change your state just for an image in template. You can make it with scope variables.
angular.module('app',[])
.controller('stormtrooperCtrl', ['$scope', function ($scope) {
//
$scope.selected = 0;
$scope.images = [
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSz6dBOOsFVAeSilVEIO9dqwrY4R5gCzEMcrRVZguhYhr9PVJsThQ",
"http://www.wallpapereast.com/static/images/Wallpaper-Nature-8B71.jpg",
"http://www.intrawallpaper.com/static/images/1250654-for-laptop-nature.jpg"
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="stormtrooperCtrl">
<button ng-click="selected=0">image1</button>
<button ng-click="selected=1">image2</button>
<button ng-click="selected=2">image3</button>
<div>
<img width="100" ng-src="{{images[selected]}}"/>
</div>
</div>
</div>
I don't know how to pass a variable from home.blade.php of Laravel to my Controller.js of AngularJS.
LARAVEL:
I have a home.blade.php with a variable searchid:
#extends('layouts.default')
#section('content')
<div class="row" ng-app="app">
{{ $searchid }}
<post-controller></post-controller>
</div>
#stop
This variable is send by controller of Laravel:
class SearchController extends BaseController {
public function makeSearch($searchid)
{
return View::make('pages.search')->with('searchid', $searchid);
}
}
ANGULARJS:
I need to pass this variable to AngularJS controller.
I have a directive file like this:
app.directive('postController', function()
{
return {
restrict: 'E',
templateUrl: 'templates/search.html'
}
});
And controller file like this:
app.controller('SearchController', ['$scope', function($scope, $routeParams)
{
console.log($routeParams.search);
$scope.param = $routeParams.search;
}]);
I don't know how to pass this variable search to my controller.js.
There's a nice package that does nearly all the work for you. PHP-Vars-To-Js-Transformer
However the basic principle is just passing variables to javascript by creating a <script> tag in your view and defining javascript variables. Here's an example:
<script type="text/javascript">
var searchId = {{ $searchId }};
</script>
Attention depending on the data type of your variable you'll have to use quotes around it or maybe even serialize it with json.
I'm building my first MEAN twitter like application and currently try to display a list of posts to the gui. what I currently do is:
The angular.js part:
in my main.js:
angular.module('MyApp')
.controller('MainCtrl', ['$scope', 'Feed', function($scope, Feed) {
$scope.feeds = Feed.showFeeds();
// ...
}
in my feed.js:
angular.module('MyApp')
.factory('Feed', ['$http', '$location', '$rootScope', '$cookieStore', '$alert', '$resource',
function ($http, $location, $rootScope, $cookieStore, $alert, $resource) {
return {
// other functions like addFeed: function(f) {...},
showFeeds: function() {
return $http.get('/api/feeds');
}
The node.js part:
app.get('/api/feeds', function (req, res, next) {
var query = Feed.find();
query.limit(8);
query.exec(function (err, feeds) {
if (err) return next(err);
res.send(feeds)
// feeds is a corret JSON with all my data at this point
});
});
and my home.html:
<p>{{ feeds }}</p> <!-- for testing - this just returns {} -->
<div ng-repeat="feed in feeds">
<div>
{{feed.feedMessage}}
</div>
So my problem is: Everything loads fine, but nothing renders out on the page, I don't get any errors, just my $scope.feeds object is empty. I'm pretty new to this, so maybe it's an obvious bug, but if someone could point me in the right direction, that would be great!
Right now you are returning a promise, and you need to be accessing the data.:
Feed.showFeeds().success( function(data) {
$scope.feeds = data.feeds;
});
The '$http' service provided by angular return always an instance of '$q', another angular service which allows us to use the Promise syntax for all async commands.
When you assign the return of Feed.showFeeds() to your scope variable, you bind a promise to your view and Angular can't display it.
You should use the success method provide by $http in order to get the server data and bind them to your scope variable like bencripps said.
Note: The success method (and error) are specific methods of $http and call the $digest method of angular which triggers a refresh of the view automatically.
angular.module('MyApp')
.controller('MainCtrl', ['$scope', 'Feed', function($scope, Feed) {
$scope.feeds = [];
Feed.showFeeds().success(function(data) {
//depends of the json return
//try a console.log(data)
$scope.feeds = data.feeds
});
// ...
}
EDIT: Added $routeProvider and $routeParams, but $routeParams.productId is always undefined. It was my initial try, but I thought it was the wrong way. Anyway it does not work for the moment.
I start to learn AngularJS and I have a very simple question :
Depending on ID contained in URL, I would like to display different BD record.
...
<div ng-app=MyApp>
<div ng-controller="MyCtrl">
{{ record }}
</div>
</div>
...
My Javascript file :
var MyApp = angular.module("MyApp",[]);
MyApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/get/:productId', {
controller: 'MyCtrl'
});
}])
MyApp.controller('MyCtrl',['$scope','$routeParams','$http',
function($scope,$routeParams,$http) {
$http.get("/get/"+$routeParams.productId).success(function(data) {
$scope.record = data;
});
}])
I tried to use $routeProvider and $routeParams without success.
Thank you in advance,
Bill
you need 2 things , the $routeParams injected in your controller and create a valid route with the get method
MyApp.controller('MyCtrl',['$scope','$http',"$routeParams",
function($scope,$http,$routeParams) {
$http.get("/get/"+$routeParams.productId).success(function(data) {
$scope.record = data;
});
};