Вызов функции контроллера из директивы не обновляет область действия

Я сделал директиву, используя сервис и $resource для поиска REST API и передачи результата контроллеру. Код выглядит следующим образом:

app.controller('productsCtrl', ['$scope', function ($scope) {
    var self = this;
    self.selection;

    self.searched = function (selected) {
        self.selection = selected;
    };
}]);

app.service('productsService', ['productsResource', function (productsResource) {
    var self = this;

    self.findProducts = function (search) {
        return productsResource.query({
            sku: search
        });
    };
}]);

app.factory('productsResource', ['$resource', function ($resource) {
    return $resource('products/:sku', {
        id: '@sku'
    });
}]);

app.directive('productSearch', ['productsService', function (productsService) {
    return {
        restrict: 'E',
        scope: {
            productSelected: '&'
        },
        templateUrl: '/products/product_search.html',
        link: function (scope) {
            scope.findProducts = function (search) {
                scope.searchResults = productsService.findProducts(search);
            };
            scope.selectResult = function (selected) {
                scope.selection = selected;
                scope.showResults = false;
            };
        }
    };
}]);

Соответствующие строки HTML:

<div ng-show='products.selection'>
    {{products.selection.name}}  //does not update
</div>

и из шаблона директив:

<div ng-click="productSelected({selected: selection})"></div>

Проблема в том, что моя модель не обновляется, когда директива вызывает метод контроллера (он покажет результаты последнего поиска). Для меня это имеет смысл, потому что там не вызывается никакая «угловая» функция. Но как я должен заставить это работать. Я пробовал с $scope.$apply(), но это выдает ошибку.

Как побочный вопрос. Правильно ли я делаю это? Это угловой способ? Особенно с использованием службы внутри директивы и передачи вещей из директивы в контроллер?

РЕДАКТИРОВАТЬ: это весь файл HTML (с использованием controllerAs):

<div>
    <product-search product-selected='products.searched(selected)'></product-search>
    <div ng-show='products.selection'>
        {{products.selection.name}}
    </div>
</div>

javascript model angularjs angularjs-digest
person smdufb    schedule 15.11.2016    source источник
comment
Можете ли вы показать html, где вы используете директиву?   -  person Rajesh Dan    schedule 15.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, вам не хватает обратного вызова из директивы. Возможно, вам потребуется добавить

scope.productSelected({selected: selection})

внутри функции scope.selectResult в директиве. Полный код будет выглядеть так

 scope.selectResult = function (selected) {
     scope.selection = selected;
     scope.showResults = false;
     scope.productSelected({selected: selected}); // add this
 };
person Paulson Peter    schedule 15.11.2016
comment
Только что попробовал, и это не работает. На самом деле значение никогда не достигает контроллера таким образом, когда вызывается метод контроллера, переданный аргумент равен undefined - person smdufb; 15.11.2016
comment
Я обновил ответ, который должен быть {selected: selection} в качестве аргумента. Проверьте, достигнуто ли значение в контроллере. - person Paulson Peter; 15.11.2016
comment
Это работает, спасибо. Но можете ли вы сказать мне, почему это работает, а ng-click="productSelected({selected: selection})" нет? Потому что именно так они делают это в угловых документах. - person smdufb; 15.11.2016