Angular.js 1.2 Trennen von Controllern und Direktiven mit einem IIFE

Question

Ich habe anscheinend einen Fehler, wenn ich versuche, einen Controller innerhalb einer Direktive zu definieren, die in ein IIFE eingebettet ist. Obwohl ich das beheben konnte, indem ich ng-controller auf dem div in tableHelper.html hinzufüge. Ich habe mich gefragt, ob der folgende Code die Tabelle HelperCtrl als nicht definiert zurückgibt.

Verwendung Angularjs 1.2.29

app.module.js

(function() { 
    'use strict'; 

    angular.module('app', [ 

    ]); 
})(); 

tableHelper.controller.js

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .controller('tableHelperCtrl', tableHelperCtrl); 

    function tableHelperCtrl() { 

     var vm = this; 
     vm.data = 'some data' 
    } 
})(); 

tableHelper.directive.js

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .directive('tableHelper', tableHelper); 

    function tableHelper() { 

     var directive = { 
      restrict: 'A', 
      templateUrl: './src/app/tableHelper/tableHelper.html', 
      link: link, 
      controller: tableHelperCtrl, 
      controllerAs: 'vm' 

     }; 
     return directive; 
     } 
    } 
})(); 

tabelleHelper.html

<div> 
    <p>Table Helpers Directive</p> 
    <table> 
     <thead></thead> 
     <td>{{vm}}</td> 
    </table> 
</div> 

Answer 1

Sie sollten ihnen nicht den gleichen Controller zuweisen. Geben Sie ihnen jeweils einen Controller und sorgen Sie dafür, dass sie über den Bereich kommunizieren (bei Bedarf auch über isolierte Bereiche) oder über einen Dienst.

Answer 2

Es gibt ein paar Probleme mit Ihrem Anweisungscode. Suresh's comment über den Namen Ihres Controllers in Anführungszeichen zu wickeln scheint ein Problem zu sein, obwohl ich es without them arbeiten gesehen habe, konnte ich es nicht bekommen.

Sie haben auch eine zusätzliche schließende geschweifte Klammer, die Sie nicht link definiert haben, obwohl wir annehmen könnten, dass Sie es irgendwo haben, aber es ausgelassen haben.

Noch ein Element ist, da Sie Ihren Controller als 'vm' definiert haben, möchten Sie vm.data in Ihrem HTML anstelle von nur vm verwenden.

Here's a plunker, die zeigt, wie es mit diesen Änderungen funktioniert.