Почему мое значение не обновляется в представлении директивы

0

У меня есть значение с именем $scope.title в моем контроллере. Это значение инициализируется с помощью $scope.title= 'global.loading'; , У меня есть завод под названием Product.

Мое представление вызывает директиву с помощью <menu-top ng-title="title"></menu-top>, представление этой директивы - <span>{{title|translate}}</span>.

Когда я хочу получить продукт, я делаю: Product.get(id). Их две возможности.

Первый (рабочий) → Мой продукт кэшируется в localstorage и заголовок заголовка в директиве.

Второй (не работает) → Мой продукт не кэширован, я вызываю свой WebService, помещаю ответ в кеш и возвращаю ответ. В этом случае заголовок обновляется (console.log) в контроллере, но не в моей директиве...

angular.module('angularApp')
  .directive('menuTop', function () {
    return {
      templateUrl: 'views/directives/menutop.html',
      restrict: 'E',
      scope:{
        ngTitle: '=?'
      },
      link: function postLink(scope) {
        scope.title = scope.ngTitle;
      }
    };
  });



angular.module('angularApp')
  .controller('ProductCtrl', function ($scope, $routeParams, Product) {
    $scope.productId  = parseInt($routeParams.product);
    $scope.title      = 'global.loading';

    $scope.loading  = true;
    $scope.error    = false;
    $scope.product  = null;

    Product
      .get($scope.productId)
      .then(function(product){
        $scope.loading  = false;
        $scope.title = product.name;
        $scope.product = product;
      }, function(){
        $scope.error = true;
        $scope.loading = false;
      })
    ;
  });


angular.module('angularApp')
  .factory('Product', function ($http, responseHandler, ApiLink, LocalStorage, $q) {
    var _get = function(id) {
      return $q(function(resolve, reject) {
        var key = 'catalog/product/' + id;
        var ret = LocalStorage.getObject(key);
        if (ret) {
          return resolve(ret);
        }

        responseHandler
          .handle($http({
            method: 'GET',
            url: ApiLink.get('catalog', 'product', {id: id})
          }))
          .then(function(response) {
            if (response.product && response.product.name) {
              LocalStorage.putObject(key, response.product, 60 * 5);
              return resolve(response.product);
            }
            reject(null);
          }, function() {
            reject(null);
          });
      });
    };

    return {
      'get': _get
    };
  });

Спасибо за помощь !

Теги:
angularjs-scope
angularjs-directive

1 ответ

1
Лучший ответ

Как предложил Серхио Туленцев, вы можете использовать "@" как метод привязки.

Использование @будет интерполировать значение. Это означает, что вы можете использовать его как readonly следующим образом: ng-title="{{mytitle}}"

angular.module('angularApp')
  .directive('menuTop', function () {
    return {
      templateUrl: 'views/directives/menutop.html',
      restrict: 'E',
      scope:{
        ngTitle: '@'
      },
      link: function postLink(scope) {
        scope.title = scope.ngTitle;
      }
    };
  });

Также имейте в виду, что вы не должны использовать "ng" для своих пользовательских директив. ng используется для угловых туземных компонентов. Вы можете (должны) сохранить это соглашение об именах с вашим именем приложения. Как и для приложения " MyStats ", вы могли бы назвать свои компоненты ms-directivename

Если вам нужна дополнительная информация о привязках к директивам, вы можете обратиться к этой документации

  • 0
    спасибо, я буду использовать {title: '@=ngTitle'}
  • 0
    @IgiX Я бы рекомендовал использовать что-то вроде 'menu-title', ng зарезервировано для собственных угловых компонентов.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню