Как передать шаблон шаблона директивы для контроллера/родительского объекта

Question

Ух, я застрял в одном из этих угловых привязок (без каламбура), где я не могу заставить моего контроллера поговорить с моей директивой.

Моя директива заключается в следующем, отборное выпадающий с шаблоном:

app.directive('month', function() { 
    return { 
    replace:true, 
    scope:{ 
    months:"=", 
    monthChoice:"=" 
    }, 
    template:'<select ng-model="monthChoice" ng-options=\"currMonth for currMonth in months\" class=\"monthsClass\"></select>', 
    link: function (scope, element, attrs) { 

     var lastEntry = scope.months.length - 1; 
     scope.monthChoice = scope.months[lastEntry]; 

     scope.$watch('monthChoice', function() { 
     console.log(scope.monthChoice); 
     }); 
    } 
    } 
}) 

В months значения, которые населяют выберите приходят из службы, которая обменивается данными с контроллером:

app.controller('CandListCtrl', ['$scope', 'Months', 
    function ($scope, Months) { 

    $scope.months = Months.init(); 

    $scope.$watch('monthChoice', function() { 
     console.log($scope.monthChoice); 
     }); 

    $scope.whichMonth = function(m) { 
     console.log(m); 
     console.log($scope.month); 
     return true 
    } 

    }]); 

Что Я хотел бы иметь возможность передать значение модели monthChoice контроллеру при возникновении изменения. Таким образом, я могу получить к нему доступ из других элементов html в моем частичном представлении. Мой частичный вид устанавливается следующим образом:

<month months="months" ng-change="whichMonth(monthChoice)"></month><br> 

Он находится внутри частичный, который направляется с использованием типичного $ routeProvider:

app.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/', { 
     templateUrl: 'partials/cand-list.html', 
     controller: 'CandListCtrl' 
     }). 
     otherwise({ 
     redirectTo: '/' 
     }); 
    }]); 

я бросаю следующее сообщение об ошибке: Expression 'undefined' used with directive 'month' is non-assignable!

И Я не могу получить доступ к значению с контроллера.

Answer 1

Это скорее комментарий, но неудобно отправлять там код. Интересно, почему вы задаете monthChoice здесь

scope:{ 
    months:"=", 
    monthChoice:"=" 
    } 

А затем пытается передать его в функцию связи?

Редактировать: Я думаю, что я просто воспользуюсь службой Months, которую у вас уже есть, и установите здесь переменную monthChoicce. Затем он становится легко повторно использовать в других контроллерах и что у вас:

app.directive('month', function(Months) { 
    return { 
    replace:true, 
    scope:{ 
    months:"=" 

    }, 
    template:'<select ng-model="service.monthChoice" ng-options=\"currMonth for currMonth in months\" class=\"monthsClass\"></select>', 
    link: function (scope, element, attrs) { 

     var lastEntry = scope.months.length - 1; 
     scope.service = Months; 

     scope.$watch('monthChoice', function() { 
     console.log(scope.monthChoice); 
     }); 
    } 
    } 
}) 

Edit: Сделал обновление. Вы должны привязываться к объекту, в этом случае я использую сам объект службы, чтобы изменения отражались повсюду. Это связано с тем, что, когда вы устанавливаете объект javascript на другой объект, они привязываются по ссылке.

Еще редактировать

Хорошо, вот еще одна попытка, что соответствует более того, что вы пытаетесь сделать изначально. Нет службы или другой магии. Вот контроллер:

.controller('myController', function($scope) { 
    $scope.months = [ 
     'Jan', 
     'Feb', 
     'Mar' 
    ]; 
    $scope.monthChosen = ''; 
}) 

Просто простой массив месяцев, и наша переменная monthChosen, все из которых мы будем посылать к директиве. monthChosen автоматически будет изменен с помощью ng-модели и двусторонней привязки. Вот наш шаблон маршрута:

<div data-ng-app="myApp" data-ng-controller="myController"> 
    <div data-my-directive months="months" month-choice="monthChosen"></div> 
    <div>{{monthChosen}}</div>  
</div> 

Вы можете видеть, что на дисплее отображается текущая позиция, расположенная вне директивы. Когда вы меняете раскрывающийся список, он изменяется. Вот наша директива:

.directive('myDirective', function(){ 
    function link(scope, elem, attrs){ 
     //You can do fun stuff here if you want   
    } 
    return { 
     scope: { 
      months: '=', 
      monthChoice: '=' 
     }, 
     link: link, 
     template: '<select ng-model="monthChoice" ng-options="currMonth for currMonth in months" class="monthsClass"></select>' 
    } 
}); 

Он не содержит ничего, кроме наших определений шаблонов и области видимости в этой точке.Как вы видите, вы не должны установить monthChoice самостоятельно, так как угловая ухаживает этого :)

jsFiddle: http://jsfiddle.net/vt52bauu/

monthChosen (контроллер) < => monthChoice (директива)

Answer 2

You может просто использовать как вашу директиву, так и ngModel и обмениваться данными через ngModel.NgModelController. Например ...

app.directive('month', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    require: 'ngModel', 
    scope: { 
     months: '=' 
    }, 
    template: '<select class="monthsClass" ng-options="month for month in months"></select>', 
    link: function(scope, element, attr, modelController) { 
     modelController.$setViewValue(scope.months[scope.months.length - 1]); 
     modelController.$render(); 
    } 
    } 
}); 

и

<month ng-model="month" months="months"></month> 

Plunker