Проблема с угловым аккордеонным областью

У меня есть директива, называемая шаблонами, код для шаблонов, как показано ниже.Проблема с угловым аккордеонным областью

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);

Это в основном используется для компиляции кода HTML и отображения it.But для лучшего понимания вопроса я не использую его для этой цели в примере. Файл app.js подобен ниже

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 
    }; 
});

В index.html используется аккордеон, как показано ниже.

<!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>

Проблема я столкнулся в том, что я не в состоянии получить значение scope.name из шаблона в AccordionDemoCtrl. Есть ли способ получить это значение в AccordionDemoCtrl?

источник

2015-07-23 robin

Ваш код кажется не завершен, например, как определение 'launch' и * другая директива * ... Вы можете уменьшить проблему до меньше коды и поместить его на JSFiddle , и т.д? – Joy

Я изменил вопрос – robin

У вас должен быть доступ к объекту name от AccordionDemoCtrl. Потому что ваша директива имеет scope: false и устанавливает scope.name в функции ссылки, как и упрощенная демонстрация здесь: JSFiddle.

Настоящая рабочая демонстрация изменена в вашем примере: Plunker (с использованием двусторонней привязки).

Пояснения

The directive accordion doesn't define scope, поэтому ее объем является одним из внешнего контроллера. transclude:true делает Угловое создание дочернего объекта для директивы template. Но так как name на внешнем контроллере является примитивным типом, установка значения внутри template создаст новый name в области дочерних объектов. См. Рабочую демонстрацию: JSFiddle. Иллюстрации:

Если использовать объект вместо примитивного, он работает (JSFiddle).

Для получения более подробной информации: Understanding Scopes

кажется лучше использовать two-way binding для обмена данными между директивой и внешним контроллером.

Вот рабочий пример: Plunker

источник

2015-07-23 17:27:01 Joy

Я изменил app.js, чтобы включить шаблонModule, как вы сказали. Но его по-прежнему показывается как неопределенный. Проблема заключается в гармонии вокруг директивы. Это будет работать как ваш пример. Код изменен, чтобы показать внесенные изменения. – robin

Таким образом, 'scope' внутри' template' является именно тем, что находится на 'accordion'. Проверьте определение 'accordion', чтобы узнать, откуда его« область ». – Joy

Но все же я получаю его как неопределенный. – robin

Проблема с угловым аккордеонным областью

ответ

Смежные вопросы