0

I'm having issues with a dynamically placed template.

My HTML for index.html looks something like this:

<body data-ng-controller="MainController">
<data-ng-include id="outside" src="dynamicTemplate()"></data-ng-include>
</body>

The index.html page displays a template based on a certain condition.

Here is the code for my home.html, which is the default template for index.html.

<span data-ng-bind="message" data-ng-style="messageStyle"></span>
<form data-ng-controller="FormController" data-ng-submit="processForm()">
other form stuff goes here
</form>

My FormController looks something like this:

  app.controller("FormController", ['$scope', '$http', '$window', function($scope, $http, $window) {
    $scope.message = "";




    $scope.processForm = function() {
      $scope.message = "Processing form";
      $scope.messageStyle = {
        "color": "green"
      };
      // Ajax Logic to process form
      .success(function(data) {
        $scope.message = data.msg; /* Message never gets updated in the view */


      });

    };



  }]);

The issue here is that the $scope.message never displays any data in the data-ng-bind="message" after the FormController gets called. I think the issue lies with the scope not knowing which controller it belongs to. How can I fix this?

freetoplay
  • 657
  • 2
  • 8
  • 23
  • you got Main in the front and formController in the backend posted here – Brett Sep 20 '15 at 23:29
  • @Brett The FormController is nested in the MainController here. – freetoplay Sep 20 '15 at 23:35
  • 1
    something isn't quite right here. are you nesting controllers and trying to access something from one `$scope` in the other controller? `$scope` isn't shared. – Claies Sep 20 '15 at 23:35
  • @Claies I'm trying to assign the `$scope` of `data-ng-bind="message"` to FormController, but I'm not sure how to do that. – freetoplay Sep 20 '15 at 23:37
  • also, you seem to be using `$scope` primitives, which can be troublesome in the best situations, due to [JavaScript Prototype Inheritance](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs), but can be downright broken when nesting controllers. most likely (and unfortunately unverifiable without a working example of your issue), you are hiding the property you want to set with the nested controller. – Claies Sep 20 '15 at 23:40
  • and you *say* that you want to set a property in `FormController`, but your HTML shows that property outside that scope. – Claies Sep 20 '15 at 23:41
  • angular scopes **always** know which controller they belong to, and you can't set a property of a scope from a different controller (at least not the way you appear to be trying to). – Claies Sep 20 '15 at 23:44
  • 1
    why don't you wrap the entire code for home.html in a `
    ` and move the `ng-controller` to that element instead of the `
    ` element?
    – Claies Sep 20 '15 at 23:47
  • @Claies Thanks, it appears that pulling the `ng-controller` out of the form element works. – freetoplay Sep 21 '15 at 01:40

0 Answers0