Question

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

我的观点是通过<menu-top ng-title="title"></menu-top>调用指令，该指令的视图为<span>{{title|translate}}</span>。

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

第一个（工作） - ＆gt;我的产品缓存在localstorage中，我的指令中的标题被提升了。

第二个（不工作） - ＆gt;我的产品没有缓存，我调用我的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
    };
  });

感谢您的帮助！

Answer 1

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

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

如果您需要有关指令绑定的更多信息，可以参考this documentation

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

1 个答案: