I am new to using plnkr. I have created my first plnkr and facing an issue in setting the $scope.currentPage variable. All other variables are working fine except the currentPage. I am using the angular-utils-pagination directive.
Once I click on the page number the variable is getting printed but when the page gets loaded for the first time the variable is not initialized.
Please let me know where I am going wrong. The link for the plnkr - Link
The problem is that you are injecting $scope into your MyApp directive. There's no need to do this since directives have access to their parent scope by default. So it should look like this:
angular.module('myApp').directive('myTable', function ()
Related
I am a bit of a beginner, but I would like to ask a general question. AngularJS does a watch on binded variables. My question is, when I navigate and a new html template is loaded, are the old watched values removed, or do they stay in the loop?
Hello $watch is bound to a controller ,which in turn shows the data to an HTML template.
So, If you navigate to another state or url and another controller loads , then the previous controller with all the data and the $watch will be unloaded, but new ones($watch) will load from the new loaded controller(if there are any).
$watch are never removed by itself, they have to be removed manually.
You should go through $watch lifecycle : $watch life cycle
No, the $watch list is updated as per the html which is being rendered by the browser.If you change template inside the page, the browser will have to render the new expression.
I think this youtube video would help you in getting
I have a ng-repeat which is displaying a list of hotels from a jsonresponse. This works fine, but when i come to place a scope data inside an ng-click it isn't working as expected.
I am using:
ng-click="quick_view('{{hotel.hotel_id}}')"
My function is inside the correct controller as is as follows:
$scope.quick_view = function (hotel_id) {
$scope.hotel = hotel_id;
(Hotel ID is 140) so naturally, i would expect 140 to pass to the function quick_view and display '140' when i call {{hotel}}. Instead, what is being displayed is "{{hotel.hotel_id}}".
Any ideas why this is going wrong?
Many thanks, as usual.
{{}} is an Angular expression where you can show data stored in $scope.
Change ng-click="quick_view('{{hotel.hotel_id}}')" to ng-click="quick_view(hotel.hotel_id)".
I have a pagination inside a dialog both directives are of ui.bootstrap. The problem is that the $watch is not working for currentPage member.
Now, the similar code works perfectly fine for other pages where pagination is not inside some dialog.
I suppose this problem is related to $scope but then currentPage is available in the scope and i can display it on the template using {{currentPage}}
Please find the code in the plunker
$scope.$watch('currentPage') is not firing up on clicking page links.
Now, for the workaround I could use callback on-select-page provided by the pagination directive.
e.g.
<pagination on-select-page="pageChanged(page)" total-items="totalItems" items-per-page = "numPerPage" page="currentPage" max-size="maxSize"></pagination>
and inside my controller i can have,
$scope.pageChanged = function(page) {
console.log(page);
};
But I rather need to understand why in such cases $scope.$watch wont work.
Update:
From the console following is the watchers value
$$watchers: Array[1]
0th: Object
eq: false
exp: "currentPage"
fn: function (o,n){}
Use:
... page="$parent.currentPage" ...
Or proper solution:
When nested scopes are involved bind your vars a level deeper i.e.:
$scope.data.currentPage = ...
details here
example here
Because you're creating a new controller (ModalDialogBaseCtl) inside the TestCtrl controller, Angular will create a new scope, which inherits all properties from its parent.
The line that looks suspect to me is where you're assigning a value to $scope.currentPage at the start of ModalDialogBaseCtrl. Angular will interpret this as you declaring a new variable called currentPage in the new scope. However, your pagination control is attached to the currentPage variable in MainCtrl so watching the ModalDialogBaseCtl one does nothing (it never changes value).
One fix is to use $parent as Max suggests, but that is not a great structure. Instead, try to find a way to only have one currentPage property instead of two.
Here is my plnkr http://plnkr.co/edit/U5WiZzhX31ifux33enYh
I'm writing a in-place editor directive. It works as expected first time but subsequent times Save or Cancel buttons does not work. Why is that?
In plnkr when I click Save or Cancel 2nd time, it does nothing but in my local dev environment it reloads page.
I'm angular newbie, appreciate your help. Thanks!
If you remove the editor element from the DOM you will have to recompile the template before adding it again, or otherwise you will loose access to the scope.
Change your show function to something like this:
function show(){
editor = $compile(template)(scope);
element.after(editor);
element.hide();
}
I have the following line in my html:
<div ng-bind-html-unsafe="departmentConfig" class="control-group"></div>
and I use a $resource get to retrieve the HTML, assign the HTML to $scope.departmentConfig, and then the view is updated perfectly. The HTML that is assigned to $scope.departmentConfig contains form elements, with ng-model attributes in it, but when I change the values in these input elements, they don't update the $scope model at all.
This is what I have tried, based on a lot of other internet posts, and it isn't working:
$resource('resources/sources/departments/:mappedName', {
mappedName:departmentKey
}).get(function(departmentConfig) {
// This will call another function that will build a chunk of HTML
$scope.departmentConfig = $scope.buildDepartmentConfigHtml(departmentConfig);
// This is my feeble attempt to access the element, and bootstrap it to include the items in the $scope model.
var $departmentConfigContainer = $('#departmentConfig');
angular.bootstrap($departmentConfigContainer, ['sourcemanager']);
I have even seen some jsFiddle examples where this appears to be working, but mine isn't. Am I calling bootstrap too soon? I also tried putting a $watch on $scope.departmentConfig like this:
$scope.$watch('departmentConfig', function() {
var $departmentConfigContainer = $('#departmentConfig');
angular.bootstrap($departmentConfigContainer);
});
but it didn't work either. I bet there is an easy explanation to this, I just can't seem to get the input elements with ng-model that are loaded after page compile to get bound to the model. Any help is appreciated, this is the last piece of functionality I need to get working on my page. Let me know if you need more information about my configuration as well.
So, simply put, how can I force a section of the DOM to recompile after I know it has been loaded?
UPDATE
Here is a jsfiddle outlining what I would like to do: http://jsfiddle.net/j_snyder/ctyfg/. You will notice that property two and three don't update the model, and I am calling bootstrap on the outer div, hoping that will include those in the model binding. This is the first time I have posted to jsfiddle, please let me know if you can't see the example.
ng-bind-html is made for regular HTML, not compiling new angular elements.
You will have use the $compile service.
Here is how you would edit your current example to work: http://jsfiddle.net/andytjoslin/ctyfg/21/. But this way ends up being bad, because you have to do DOM manipulation in your controller.
You just need to create a directive that will basically do what you wanted ng-bind-html to do: http://jsfiddle.net/andytjoslin/ctyfg/22/