I want to change the iframe source on runtime
<div class="pp lsv-video pp-player" id="rs" ng-controller="ctrl2">
<input type="text" style="width:0px;height:0px;display:none;" />
<iframe src="" class="lsv" marginheight="0" marginwidth="0" frameborder="0"></iframe>
</div>
when user clicks on any of the (mentioned below), teh data mentioned b.VideoSrc should be transferred to the different controller Ctrl2 and iframe source has to be changed.
<ul ng-controller="ctrl1">
<li ng-repeat="b in KeynoteSessions | filter:isBD">
<a href='#rs' class="fancybox" name='{{b.VideoSrc}}'>
<img src='{{b.ImageSrc}}' width='{{b.ImageWidth}}' height='{{b.ImageHeight}}' alt='{{b.ImageAlt}}' /><br />
{{b.Text}}
</a>
</li>
</ul>
please help me to achieve this, thanks!
there are many ways
1.You can create services and use common services to share data.
2.you can use rootscope variable.
3.angularjs $emit, $broadcast methods you can use
like
myApp.factory('Data', function () {
return { FirstName: '' };
});
myApp.controller('FirstCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('SecondCtrl', function ($scope, Data) {
$scope.Data = Data;
});
http://jsfiddle.net/HEdJF/
check this one:Share data between AngularJS controllers
Usually I'm putting related content in the same controller (Youtube frame and "remote" together for exemple) but sometime I can't, so I pass the data through a Javascript Variable (Dont forget that your var need to be defined outside your controller )
Related
I know how to share data between controllers using service but this case is different so please rethink the question.
I have something like this for the UI:
<jsp:include page="../home/Header.jsp" />
<div data-ng-view></div>
<jsp:include page="../home/Footer.jsp" />
Inside the ng-view, I instantiated a controller instance using "data-ng-controller="BuildController as ctrl". It will run this function that might take up to 2 hours. After it's completed, the buildCompletionMsg is updated and pop up a box saying it's completed.
self.buildServers = function(servers, version) {
BuildService.buildList(servers, version).then(
function(data) {
self.buildCompletionMsg = data;
$('#confirmationModal').modal('show');
},
function(errResponse) {
console.error("Error getting servers." + errResponse);
}
);
};
The problem is that I want the modal to be in the Header.jsp file so doesn't matter which view the user is in, they would see the notification. Therefore in Header.jsp I have another controller instance using "data-ng-controller="BuildController as ctrl" and bind it using
<div data-ng-controller="BuildController as ctrl">
<div class="modal fade" id="confirmationModal" role="dialog" aria-labelledby="confirmLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<h3>{{ ctrl.buildCompletionMsg }}</h3>
</div>
</div>
</div>
</div>
</div>
As you can see, even if I do something like:
self.buildCompletionMsg = BuildService.getCompletionMsg();
it would only update the ctrl instance of the ng-view page, and the one inside Header.jsp is still null.
How can I update all the instances of BuildController in different pages or just update the one in the Header.jsp file?
I found the answer to my own question. The solution is to to have an object reference or array in the service (it does not work for simple string) like this:
angular.module('buildModule').factory('BuildService', ['$http', '$q', function($http, $q) {
var self = {};
self.completionStatus = { data: "" };
then upon $http success update the completionStatus
self.status.data = response.data;
And in the controller, the variable is set directly to this object
self.buildCompletionMsg = BuildService.completionStatus;
This updates the variable {{ buildCompletionMsg }} on all the pages.
I am having trouble updating my scope on the front-end while making a request to an API. On the backend I can see that the value of my $scope variable is changing but this is not being reflected in the views.
Here is my controller.
Controllers.controller('searchCtrl',
function($scope, $http, $timeout) {
$scope.$watch('search', function() {
fetch();
});
$scope.search = "Sherlock Holmes";
function fetch(){
var query = "http://api.com/v2/search?q=" + $scope.search + "&key=[API KEY]&format=json";
$timeout(function(){
$http.get(query)
.then(function(response){
$scope.beers = response.data;
console.log($scope.beers);
});
});
}
});
Here is a snippet of my html
<div ng-if="!beers">
Loading results...
</div>
<p>Beers: {{beers}}</p>
<div ng-if="beers.status==='success'">
<div class='row'>
<div class='col-xs-8 .col-lg-8' ng-repeat="beer in beers.data track by $index" ng-if="beer.style">
<h2>{{beer.name}}</h2>
<p>{{beer.style.description}}</p>
<hr>
</div>
</div>
</div>
<div ng-if="beers.status==='failure'">
<p>No results found.</p>
</div>
I've tried several solutions including using $scope.$apply(); but this just creates the common error
Error: $digest already in progress
The following post suggested to use $timeout or $asyncDefault
AngularJS : Prevent error $digest already in progress when calling $scope.$apply()
The code I have above uses $timeout and I have no errors but still the view is not updating.
Help appreciated
I you are using AngularJS 1.3+, you can try $scope.$applyAsync() right after $scope.beers = response.data; statement.
This is what Angular documentation says about $applyAsync()
Schedule the invocation of $apply to occur at a later time. The actual time difference varies across browsers, but is typically around ~10 milliseconds. Source
Update
As others have pointed out, you should not (usually) need to trigger the digest cycle manually. Most of the times it just points to a bad design (or at least not an AngularJS-friendly design) of your application.
Currently in the OP the fetch method is triggered on $watch. If instead that method was to be triggered by ngChange, the digest cycle should be triggered automatically.
Here is an example what such a code might look like:
HTML
// please note the "controller as" syntax would be preferred, but that is out of the scope of this question/answer
<input ng-model="search" ng-change="fetchBeers()">
JavaScript
function SearchController($scope, $http) {
$scope.search = "Sherlock Holmes";
$scope.fetchBeers = function () {
const query = `http://api.com/v2/search?q=${$scope.search}&key=[API KEY]&format=json`;
$http.get(query).then(response => $scope.beers = response.data);
};
}
As the comments suggest, you shouldn't need to use $timeout to trigger a digest cycle. As long as the UX that elicits the change is within the confines of an angular construct (e.g. controller function, service, etc.) then it should manifest within the digest cycle.
Based on what I can infer from your post, you are probably using a search input to hit an API with results. I'd recommend changing the logic up such that you are triggering your search on an explicit event rather than the $watcher.
<input ng-model="search" ng-change="fetch()">
Remove the $watch logic and the $timeout wrapper.
function fetch(){
var query = "http://api.com/v2/search?q=" + $scope.search + "&key=[API KEY]&format=json";
$http.get(query)
.then(function(response){
$scope.beers = response.data;
console.log($scope.beers);
//it's a good habit to return your data in the promise APIs
return $scope.beers;
});
}
The reasons I make this recommendation is:
You have finer control of how the ng-change callback is triggered using ng-model-options. This means you can put a delay on it, you can trigger for various UX events, etc.
You've maintained a clearer sequence of how fetch is called.
You have possibly avoided performance and $digest issues.
Hey guys I solved the issue but I'm not sure exactly why this changed anything. Rearranging my code on JS Fiddle I just put all my partials into the index.html file like so and the requests and scope variables updated smoothly. Is was there perhaps a controller conflict with my html above?
<body ng-app="beerify" ng-controller='searchCtrl'>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container"><!-- nav bar code -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Title</h1>
<form ng-submit="fetch()">
<div class="input-group">
<input type="text" ng-model="search"
class="form-control" placeholder="Search the name of a beer" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
<div class="container">
<div ng-if="!beers">
Loading results...
</div>
<div ng-if="beers.status==='success'">
<div class='row'>
<div class='col-xs-8 .col-lg-8' ng-repeat="beer in beers.data track by $index" ng-if="beer.style">
<!-- ng-if will make sure there is some information being displayed
for each beer -->
<h2>{{beer.name}}</h2>
<h3>{{beer.style.name}}</h3>
<p>AbvMin: {{beer.abv}}</p>
<p>AbvMax: {{beer.ibu}}</p>
<p>{{beer.style.description}}</p>
<hr>
</div>
</div>
</div>
<div ng-if="beers.status==='failure'">
<p>No results found.</p>
</div>
</body>
I'm moving my very first steps with angularjs.
I have a controller which does a call to a service, which returns a list of urls (parent).
I would like to render a html ul for which each li is rendered by another controller (children) with its own template. I imagine something like this:
<ul ng-controller="ListCtrl">
<li ng-repeat="element in elements">
<div ng-controller="DetailCtrl">
{{oneField}} - {{anotherField}}
</div>
</li>
</ul>
The first controller is easy to implement:
myApp.controller('ListCtrl', function ($scope, $http) {
$http.get('services/elements')
.success(function(data) {
$scope.elements = data;
});
});
But for the second I have a problem, since I can't figure out how the controller could know which url use for the ajax call (DYNAMYC_URL):
myApp.controller('DetailCtrl', function ($scope, $http) {
$http.get(DYNAMYC_URL)
.success(function(data) {
$scope.element = data;
});
});
Could you please suggest me which is the best way in angular to approach this problem?
I've also considered to do many calls inside the first controller, but it doesn't seem a clean solution to me.
We will try to maintain the state of childRenderUrl function call in element while
initializing the element itself in ng-unit attribute.
Instead of DetailCtrl
We write a function renderChild defined as
$scope.renderChild =function(element)
{
$http.get(element.url)
.success(function(data) {
// add all required fields to element here
element.otherField=data.otherField;
element.sometherField=data.sometherField;
//a $scope.$digest may be required here
});
}
Your display logic would be
<ul ng-controller="ListCtrl">
<li ng-repeat="element in elements">
<div ng-init="renderChild(element)">
{{element.oneField}} - {{element.anotherField}}
</div>
</li>
</ul>
On initializing we would call the renderChild method which would
add two properties to the element object that would be aptly displayed by
expressions {{element.oneField}} - {{element.anotherField}}
I am working on Cordova tool and angularjs for my application.
cordovaApp.controller("VacationCtrl", function ($scope, $http, $location) {
$scope.tempdate = "2222";
$scope.ruleDetails = function () {
$scope.tempdate = "3333";
}
});
view 1
<div ng-controller="VacationCtrl">
<a ng-repeat="data in rules" ng-click="ruleDetails()" class="summaryListBorder" href="#detailVacationRule">
</a>
</div>
view 2
<div ng-controller="VacationCtrl">
{{tempdate}}
</div>
In above given code, I sat value of $scope.tempdate to "2222". When I am click on link, it calls ruleDetails() and set $scope.tempdata = "3333". But when the new page is open with ng-view, it shows only old value, i.e. "2222". I want to change it with "3333". I have tried with $scope.$apply() too.
Thanks.
Every ng-controller attribute creates a new instance of the controller, which won't share the same scope as other instances. You want to wrap both divs in a single controller instance, like:
<div ng-controller="VacationCtrl">
<div>
<a ng-click="ruleDetails()" href="#detailVacationRule">
</a>
</div>
<div>
{{ tempdate }}
</div>
</div>
If you need separate controllers, then you want to move common functions/fields into a service, which operates as a singleton so you can use it to share information between controllers. Or you could contain the separate controller instances in a parent controller, which will hold common fields and can be accessed through each controller's scope.
My HTML
ng-app and ng-controller are specified in markup earlier
<div class="statusEntry" ng-repeat="statusInput in statusInputs">
<span class="userName"> a </span>
<span class="statusMsg"> b </span>
</div>
Controller
app.controller('globalCtrl', ['$scope', function($scope) {
//someWork
pubnub.subscribe({
channel: "statuses",
callback:
function (data) {
splitData = data.split(';');
prepData = '{'+splitData[0]+','+splitData[1]+'}';
statusInputs.push(prepData);
}
});
When I push the data no new object appears.
Your Controller has no name.
You haven't declare an ng-app or ng-controller in your markup anywhere.
data should be named $scope so Angular can appropriately inject the dependency.
It doesn't look like either statusInputs or your function are part of the $scope therefore there's no way for your view to access them.
Replace
statusInputs.push(prepData);
with
$scope.statusInputs.push(prepData);
This is how you enable your views to access them.