JavaScript directive not working like I would imagine it should

Question

    (function(angular) {
      'use strict';
    angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
  }])
  .controller('testController', ['$scope', function($scope) {
    $scope.test.name = customerInfo.name;

  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      templateUrl: 'my-customer-iso.html',
      controller: 'testController'
    };
  });
})(window.angular);

I have values inside of Controller A (in the Plunker example, 'Controller') that I want to pass through to Controller B (in the Plunker example, 'testController') through the use of a Directive. Standard programming experience would have me thinking to do it as I have attempted to in the Plunker but when I look at the Run results I'm not getting the functionality I want.

What gives?

score 1 · Accepted Answer · answered Apr 08 '15 at 16:05

1

Link to plunker

You only miss to add $scope to customerInfo

 $scope.test.name = $scope.customerInfo.name;

answered Apr 08 '15 at 16:05

hayatoShingu

418
5
11

So I see this working in the plunker you linked. It seems to 50% be working in my real project. I wonder if I'm having an issue with renaming the object which is why I'm seeing it set to defined in the testController. In Controller it's named "case" and in testController and the directive I'm calling it "parentCase" becasue "case" is reserved in javascript. Could that be an issue? – Friend Apr 08 '15 at 18:40
Ah - I figured out my problem. In my external project, I was renaming "case" to "parentCase" and attempting to refer to it as "parentCase" in the HTML. I needed to be calling it "parent-case". The reason it wasn't apparent here was because the AngularJS demo code I was using was looking for "info" and not "customerInfo" which would have let me catch it sooner. Thanks for your help! – Friend Apr 08 '15 at 19:16

score 0 · Answer 2 · answered Apr 08 '15 at 16:05

0

the scope tag injects the object directly no need for a separate controller unless you need to have custom logic in the directive.

If it is just for display and structure this should start you off in the right direction.

(function(angular) {
  'use strict';
angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      template: 'Name: {{customerInfo.name}} Address: {{customerInfo.address}}'
    };
  });
})(window.angular);


Name: {{customerInfo.name}} Address: {{customerInfo.address}}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="docsIsolateScopeDirective">
  <div ng-controller="Controller">
  <my-customer info="naomi"></my-customer>
  <hr>
  <my-customer info="igor"></my-customer>
</div>

answered Apr 08 '15 at 16:05

corn3lius

4,857
2
31
36

Translating this to my actual project I'm going to have to pass a bunch of Object A's data from Controller A to the controller I want to create Object B in. Object B can be created in 3-4 locations so I want to reuse the controller for that in all locations by passing through some options that are set up in the "parent" controller; in this case, the parent controller would be Controller A. Would using a separate controller make sense in that scenario? – Friend Apr 08 '15 at 16:11
is there callback logic for the object `customerInfo` or is it just a display of the name/address/etc.? – corn3lius Apr 08 '15 at 16:26
I believe it'll just be information that helps Object B understand its relationship to its parent (Object A aka customerInfo). customerInfo will be passed along to Controller B as well as an object "options" which will basically help me determine what type of controls to display on the directive's template page. So everything being passed through the directive are, for all intents and purposes, read only. – Friend Apr 08 '15 at 18:20
Then I dont think you need a derived controller. just inject the scope as shown and the directive will bind with the parent scope. look here for other bindings in directives http://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope – corn3lius Apr 08 '15 at 18:47
I come from a heavy OO background so part of me wanting to limit the scope is simply following what I feel are good programming practices. I'm not a huge fan of JavaScript so I'm trying to keep some of my sanity by keeping it as non-spaghetti was possible. I totally get what you're saying and think maybe it's a better way to go, though. I did get it working to what I was originally looking for (see above comment reply) but I do see what you're trying to convey to me. I appreciate it. – Friend Apr 08 '15 at 19:18

JavaScript directive not working like I would imagine it should

2 Answers2