0

I have 8 jade view that only one of them is loaded at the time and is filled by jquery into a div which has a controller.

Now, I have 2 question about these:

  1. Does it necessary to define again the controller on top of my partial view(same controller with main controller) ?
  2. All of these views has same ng-click. but after loading they doesn't work. However they work by jquery click event. Should I do any extra thing with them?

I had same problem with li element before, but I resolve it by getting help from ng-click not working from dynamically generated HTML by using compileData but I can't get result with button.

Code:

Main jade:

div(ng-controller="elementCtrl") 
  div#ddd(class="col-lg-7 col-md-5 col-sm-7")

Partial view sample:

div#spPartial()
  div.col-lg-12.col-md-12.col-sm-12 
    span.col-lg-2.col-md-5.col-sm-5 Name
    input#EnglishName(name="name" type="text" ng-model="elementModel.Name" value="#{Name}"  class="col-lg-5 col-md-7 col-sm-5")  
  button(type="button" compile-Data  name="btnSaveElement" ng-click="saveElement()") Save

Main part of controller:

//It loads the partial view - It works successfully
$http.post('/api/elements/getElementTypesPartial',
                        {
                            "ElementId": elementId,
                            "ProgramId": newVal,
                            "ElementTypeId": elementTypeId
                        })
                        .success(function (d2) {
                            $("#ddd").html(d2);
                        }
//It doesn't work at all
$scope.saveElement = function () {
    alert();
    alert($scope.elementId);
}

And one additional thing is that I put $scope.saveElement in root of controller scope. I don't have any idea about how angularJs manage $scope, So I see $scope.elementId in client code. Is it right or I should regenerate it($scope.saveElement) every time that partial is loaded?

Sorry I couldn't find any reference which describes these...

Community
  • 1
  • 1
Siamak Ferdos
  • 3,181
  • 5
  • 29
  • 56

1 Answers1

2

You should get rid of the jQuery loading and use an angular router which will load templates based on route configuration.

Since they are loaded by angular, it does all the compiling for you. The router takes care of the ajax to get the templates automatically also.

Controllers also get defined in the routing config so you would be able to remove ng-controller from the templates

The change over shouldn't take long since setting up routing config is fairly easy to get it started

This would clear up the ng-click problems

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • I've recently start with angularJs, so I have some problem in concepts. For example in this topic I change the subview by clicking on a ui-sref. It works perfect, but all sub views has a button with same ng-click. So I should get type of subview in ng-click function in controller. I don't know how can I set it! May be I should set it in controller at ui-sref ng-click – Siamak Ferdos Jan 28 '16 at 06:46
  • Suggest start new question. I think you want something like `ui-sref="items({id: thisItem.id})"` but not exactly sure what problem is – charlietfl Jan 28 '16 at 06:49
  • I make new one! Please notice it: http://stackoverflow.com/questions/35054995/best-way-to-bind-sub-view-element-model-related-with-ui-sref-model-angularjs – Siamak Ferdos Jan 28 '16 at 07:15