Edizione con ambito a fisarmonica angolare

Ho una direttiva denominata modelli, il codice per i modelli è come indicato di seguito.Edizione con ambito a fisarmonica angolare

var templates = function($compile,$parse){ 
var directive = { 
    restrict: 'EA', 
    replace: true, 
    link: link 
}; 
return directive; 

function link(scope, element, attrs) { 
scope.name = "testName"; 
    var isHtmlCompiled = false; 
} 
}; 
angular.module('templateModules', []) 
.directive('templates', templates);

Questo viene utilizzato principalmente per la compilazione del codice HTML e la visualizzazione it.But per la migliore comprensione della questione io non sto usando a tal fine nell'esempio. Il file app.js è come sotto

angular.module('ui.bootstrap.demo', ['ui.bootstrap','templateModules']); 
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) { 
    $scope.oneAtATime = true; 

    $scope.groups = [ 
    { 
     title: 'Dynamic Group Header - 1', 
     content: 'Dynamic Group Body - 1' 
    }, 
    { 
     title: 'Dynamic Group Header - 2', 
     content: 'Dynamic Group Body - 2' 
    } 
    ]; 

    $scope.items = ['Item 1', 'Item 2', 'Item 3']; 

    $scope.addItem = function() { 
    var newItemNo = $scope.items.length + 1; 
    $scope.items.push('Item ' + newItemNo); 
    }; 

$scope.add = function(){ 
    alert($scope.name); 
} 

    $scope.status = { 
    isFirstOpen: true, 
    isFirstDisabled: false 
    }; 
});

L'index.html utilizza una fisarmonica come di seguito.

<!doctype html> 
<html ng-app="ui.bootstrap.demo"> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script> 
    <script src="app.js"></script> 
     <script src="template.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 

<div ng-controller="AccordionDemoCtrl"> 

    <accordion close-others="oneAtATime"> 
    <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> 
     This content is straight in the template. 
    </accordion-group> 
    </accordion> 
    <accordion close-others="oneAtATime"> 
     <accordion-group heading="DYnamic" is-open="status.open" is-disabled="status.isFirstDisabled"> 
     <div templates="something"></div> 
    <button ng-click="add()">Add</button> 
    </accordion-group> 
    </accordion> 

</div> 
    </body> 
</html>

Il problema che sto affrontando è che io non sono in grado di ottenere il valore di scope.name dal modello nella AccordionDemoCtrl. C'è un modo per ottenere quel valore in AccordionDemoCtrl?

fonte

2015-07-23 robin

Il tuo codice sembra non completa, come ad esempio la definizione di 'launch' e * un'altra direttiva * ... si può ridurre il problema a meno codice e metterlo su JSFiddle , eccetera? – Joy

Ho modificato la domanda – robin

Dovresti poter accedere alla proprietà name da AccordionDemoCtrl. Perché la tua direttiva ha scope: false e imposta scope.name nella funzione di collegamento, proprio come la demo semplificata qui: JSFiddle.

Ecco una demo funzionante modificata dal tuo esempio: Plunker (utilizzando il collegamento bidirezionale).

spiegazioni

The directive accordion doesn't define scope, quindi la sua portata è quello controllore esterno. transclude:true rende Angolare creare un ambito figlio per la direttiva template. Ma poiché name su controller esterno è un tipo primitivo, l'impostazione del valore all'interno di template creerà un nuovo name sull'ambito figlio. Guarda la demo di lavoro: JSFiddle. L'illustrazione:

Se utilizzare un oggetto anziché una primitiva, esso funziona (JSFiddle).

Per maggiori dettagli: Understanding Scopes

Sembra meglio usare two-way binding per comunicare tra direttiva e di controllo esterno.

Ecco una demo di lavoro: Plunker

fonte

2015-07-23 17:27:01 Joy

Ho modificato l'app.js per includere il templateModule come hai detto tu. Ma si sta ancora dimostrando non definito. Il problema è con la fisarmonica attorno alla direttiva.Else funzionerà come il tuo esempio. Codice modificato per mostrare le modifiche implementate – robin

In questo modo, 'scope' dentro' template' è esattamente quello su 'accordion'. Controlla la definizione di 'accordion' per vedere da dove proviene' scope'. – Joy

Ma ancora lo sto diventando indefinito. – robin

Edizione con ambito a fisarmonica angolare

risposta

Problemi correlati