When retrieving HTML from the server, the scope values are not appearing as expected

Question

When retrieving HTML from the server, the scope values are not appearing as expected

UPDATE: After extensive testing of my code, I have gained a better understanding of what is not functioning correctly, prompting me to revise my previous inquiry.

When browsing to the / directory in my local environment, my HTML file loads successfully.
All pages load properly except for the content of the $scope within my directives (detailed below).
I tested loading the page directly by clicking on the HTML file and was able to view the content.

The exact source of the issue remains uncertain. I have stripped down unnecessary lines from the HTML file to provide a clearer depiction of my code. The {{}} represents the templating engine language.

HTML:

<DOCTYPE html>

<html ng-app="docsSimpleDirective">
<head>
<link rel="stylesheet" type="text/css" href="/css/text.css">
<link rel="stylesheet"      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-  alpha.5/css/bootstrap.min.css" integrity="sha384-  AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"   crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js">    </script><!-- Tether for Bootstrap --> 
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap --> 

</head>
<body >

<h3>Select some text </h3>
<div ng-controller="Controller">
{% for i in result %}
<div id={{i._id}} class="task" commentId = {{i._id}} get-popover- content>{{i.text}} </div>
<div id={{i._id}} class="task" commentId = {{i._id}} my-customer="customer">{{i.text}} </div> 
<br/>
{% endfor %}
</div>

<script>
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
   $scope.customer = {
     name: 'Naomi',
     address: '1600 Amphitheatre'
   };
 }])
.directive('myCustomer', function() {
return {
  scope: {
    myCustomer: '='
  },
template: 'Name: {{myCustomer.name}} Address:         {{myCustomer.address}}'
  };

});
})(window.angular);
</script> 
</body>
</html>

javascript angularjs angularjs-directive

Answer 1

Answer №1

To create a directive with an isolated scope, use the same name for the isolated scope as the directive name:

scope: {
         myCustomer: '='
      }

Then link the controller's $scope.customer to this isolated scope like this:

<div ... my-customer="customer"></div>

Modify your template to access the data in this way:

template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'

Here is a sample of how it works:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<h3>Select some text </h3>
<div ng-controller="Controller">

<div id="test1" class="task" commentId="test1" get-popover-content>{{i.text}} </div>
<div id="test2" class="task" commentId="test2" my-customer="customer">{{i.text}} </div> 
<br/>

</div>

<script>
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
 $scope.customer = {
  name: 'Naomi',
  address: '1600 Amphitheatre'
 };
 }])
.directive('myCustomer', function() {
return {
  scope: {
     myCustomer: '='
  },
  template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
};
});
  
  angular.bootstrap(document, ['docsSimpleDirective']);
})(window.angular);
  
</script>
  
</body>

Answer 2

To create a directive with an isolated scope, use the same name for the isolated scope as the directive name:

scope: {
         myCustomer: '='
      }

Then link the controller's $scope.customer to this isolated scope like this:

<div ... my-customer="customer"></div>

Modify your template to access the data in this way:

template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'

Here is a sample of how it works:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<h3>Select some text </h3>
<div ng-controller="Controller">

<div id="test1" class="task" commentId="test1" get-popover-content>{{i.text}} </div>
<div id="test2" class="task" commentId="test2" my-customer="customer">{{i.text}} </div> 
<br/>

</div>

<script>
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
 $scope.customer = {
  name: 'Naomi',
  address: '1600 Amphitheatre'
 };
 }])
.directive('myCustomer', function() {
return {
  scope: {
     myCustomer: '='
  },
  template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
};
});
  
  angular.bootstrap(document, ['docsSimpleDirective']);
})(window.angular);
  
</script>
  
</body>

Answer 3

Answer №2

To access your controller scope, you must include scope: { .... } inside your directive.
Controller

(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
 $scope.customer = {
  name: 'John',
  address: '123 Main Street'
 };
 }])

HTML

// Implement this directive and pass the customer object to its scope
<my-customer customer="customer"></my-customer>

Directive

.directive('myCustomer', function() {
   return {
       scope: {
            customer: '=customer'
              }
       template: 'Name: {{customer.name}} Address: {{customer.address}}'
   };
 });

Answer 4

To access your controller scope, you must include scope: { .... } inside your directive.
Controller

(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
 $scope.customer = {
  name: 'John',
  address: '123 Main Street'
 };
 }])

HTML

// Implement this directive and pass the customer object to its scope
<my-customer customer="customer"></my-customer>

Directive

.directive('myCustomer', function() {
   return {
       scope: {
            customer: '=customer'
              }
       template: 'Name: {{customer.name}} Address: {{customer.address}}'
   };
 });

Answer 5

Answer №3

Enclose within

{{%  highlight %}} ... {{% endhighlight %}}

Answer 6

Enclose within

{{%  highlight %}} ... {{% endhighlight %}}

Answer 7

Answer №4

This approach might be more suitable for the outcome you are aiming for (note the comment suggesting an API call for your customers in JSON format).

By calling for data through an API after the page has been loaded, you can maintain your HTML/CSS/JAVASCRIPT files as completely static (no need for a templating engine) and separate from your data.

This method will result in faster loading times and provide you with the option of hosting your web front-end solely on something like a CDN (allowing your API server to focus solely on handling requests for data/sessions, etc).

<DOCTYPE html>
<html ng-app="docsSimpleDirective">
  <head>
    <!-- <link rel="stylesheet" type="text/css" href="/css/text.css"> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"   crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js">    </script><!-- Tether for Bootstrap -->
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->

  </head>
  <body>

    <h3>Select some text</h3>
    <div ng-controller="Controller">
      <div ng-repeat="customer in customers">
        <!-- If unsure about 'id' or 'text' values, these should be passed via API if necessary -->
        <div id={{i._id}} class="task" commentId = {{i._id}} get-popover- content>{{i.text}} </div>
        <div id={{i._id}} class="task" commentId = {{i._id}} my-customer="customer">{{i.text}} </div>
        <br/>
      </div >
    </div>

    <script>
      (function(angular) {
        'use strict';

        angular.module('docsSimpleDirective', [])
        .controller('Controller', ['$scope', function($scope) {

          // Make an API request to obtain customer data in JSON format

          // Assign the outcome to scope.customers
          $scope.customers= [
            {
              name: 'Naomi',
              address: '1600 Amphitheatre'
            },
            {
              name: 'Amir',
              address: '58 W 54th st'
            }
          ];

        }])
        .directive('myCustomer', function() {
          return {
            scope: {
              myCustomer: '='
            },
            template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
          };
        }); // directive
      })(window.angular);

    </script>

  </body>
</html>

You could also simulate a REST API server by sending a request to a static file like this:

 $http.get("./myFakeAPI.json").then(function(response){
  $scope.customers = response.data.customers;
});

The contents of the file 'myFakeAPI.json' would resemble:

{
  "customers":
    [
      {
        name: 'Naomi',
        address: '1600 Amphitheatre'
      },
      {
        name: 'Amir',
        address: '58 W 54th st'
      }
    ]
}

Answer 8

This approach might be more suitable for the outcome you are aiming for (note the comment suggesting an API call for your customers in JSON format).

By calling for data through an API after the page has been loaded, you can maintain your HTML/CSS/JAVASCRIPT files as completely static (no need for a templating engine) and separate from your data.

This method will result in faster loading times and provide you with the option of hosting your web front-end solely on something like a CDN (allowing your API server to focus solely on handling requests for data/sessions, etc).

<DOCTYPE html>
<html ng-app="docsSimpleDirective">
  <head>
    <!-- <link rel="stylesheet" type="text/css" href="/css/text.css"> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"   crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js">    </script><!-- Tether for Bootstrap -->
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->

  </head>
  <body>

    <h3>Select some text</h3>
    <div ng-controller="Controller">
      <div ng-repeat="customer in customers">
        <!-- If unsure about 'id' or 'text' values, these should be passed via API if necessary -->
        <div id={{i._id}} class="task" commentId = {{i._id}} get-popover- content>{{i.text}} </div>
        <div id={{i._id}} class="task" commentId = {{i._id}} my-customer="customer">{{i.text}} </div>
        <br/>
      </div >
    </div>

    <script>
      (function(angular) {
        'use strict';

        angular.module('docsSimpleDirective', [])
        .controller('Controller', ['$scope', function($scope) {

          // Make an API request to obtain customer data in JSON format

          // Assign the outcome to scope.customers
          $scope.customers= [
            {
              name: 'Naomi',
              address: '1600 Amphitheatre'
            },
            {
              name: 'Amir',
              address: '58 W 54th st'
            }
          ];

        }])
        .directive('myCustomer', function() {
          return {
            scope: {
              myCustomer: '='
            },
            template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
          };
        }); // directive
      })(window.angular);

    </script>

  </body>
</html>

You could also simulate a REST API server by sending a request to a static file like this:

 $http.get("./myFakeAPI.json").then(function(response){
  $scope.customers = response.data.customers;
});

The contents of the file 'myFakeAPI.json' would resemble:

{
  "customers":
    [
      {
        name: 'Naomi',
        address: '1600 Amphitheatre'
      },
      {
        name: 'Amir',
        address: '58 W 54th st'
      }
    ]
}

When retrieving HTML from the server, the scope values are not appearing as expected

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

time interval between closing angularjs modal and redirection

Utilizing pure JavaScript to dynamically fetch HTML and JavaScript content via AJAX, unfortunately, results in the JavaScript

Guide on extracting only numerical data from an array of objects for the purpose of calculating total amounts. Unveiling the challenge of building an

Transforming an established Angular application into a Progressive Web App

tips for adding text to an input field after it has been submitted

Create a PDF document using the combined HTML content

"Exploring the Constraints of MongoDB's Range Functionality

Finding the index of a clicked link using jQuery

What do the different states of AngularJS promises refer to?

ng-binding does not sync with input field

Subheaders that stay in place while scrolling through a table with a stationary header

What could be causing my YouTube code to malfunction with certain playlists?

Validating passwords using Vuetify

experiencing an excessive amount of rerenders when trying to utilize the

Error encountered during Jasmine testing: [$injector:unpr] Provider not recognized:

Grails is experiencing a surge of duplicate events being triggered simultaneously

How is it possible for the output to be a string array when the variable was declared as a number in TypeScript?

What is the best way to effectively link promise calls that rely on each other?

What is the best way to add request body data to a MySQL database when using express js?

`Nav arrow positioning problem in absolute position`