爲什麼我的值沒有在指令視圖中更新

Question

我的控制器中有一個名爲$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 
    }; 
    }); 

謝謝您的幫助！

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