为什么我的值没有在指令的视图中更新

I have a value named $scope.title in my controller. This value is initialized with $scope.title = 'global.loading';. I have a factory named Product.

我的控制器中有一个名为$ scope.title的值。该值使用$ scope.title ='global.loading';初始化。我有一个名为Product的工厂。

My view is calling a directive via <menu-top ng-title="title"></menu-top>, the view of this directive is <span>{{title|translate}}</span>.

我的观点是通过调用指令,该指令的视图是 {{title | translate}} 。

When I want to get a product I do : Product.get(id). Their is two possibility.

当我想要获得产品时,我会:Product.get(id)。他们是两种可能性。

First one (working) -> My product is cached in localstorage and my title in the directive is uptated.

第一个(工作) - >我的产品缓存在localstorage中,我的指令中的标题被提升了。

Second one (not working) -> My product is not cached, I call my WebService, put the response in cache and return the response. In this case, the title is updated (console.log) in the controller, but not in my directive ...

第二个(不工作) - >我的产品没有缓存,我调用我的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
    };
  });

Thank you for your help !

谢谢您的帮助 !

1 个解决方案

#1

As Sergio Tulentsev suggested, you can use '@' as binding method.

正如Sergio Tulentsev建议的那样,你可以使用'@'作为绑定方法。

Using @ will interpolate the value. It means that you can use it as a readonly this way : ng-title="{{mytitle}}"

使用@将插值。这意味着您可以通过这种方式将其用作只读: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;
      }
    };
  });

Also keep in mind that you shouldn't use "ng" for your custom directives. ng is used for angular natives components. You can (should) keep this naming convention with your application name. Like for an application "MyStats" your could name your components ms-directivename

另请注意,不应将“ng”用于自定义指令。 ng用于角度原生组件。您可以(应该)将此命名约定与您的应用程序名称保持一致。与应用程序“MyStats”类似,您可以将组件命名为ms-directivename

If you need more informations about the directives bindings you can refer to this documentation

如果您需要有关指令绑定的更多信息,可以参考本文档

#1