作用域對象在Angular指令中未定義

我想了解這種行爲，並添加了我正在嘗試執行的簡化代碼。在HTML部分的模態使用模態控制器我有一些像這樣的代碼：作用域對象在Angular指令中未定義

<form> 
     <!-- example one --> 
     <div read-field="{{ singleContact._id }}" ></div> 
     <h2>{{ singeContact._id }}</h2> 

     <!-- example two --> 
     <div read-field="{{ someScope }}"></div> 

</form>

和指令：

angular.module('myApp') 
.directive('readField', function() { 
    return { 
     link: function (scope, element, attrs) { 
      console.log(attrs); // outputs correct object with attrs.readField "523c2..mongo_id.." 
      console.log(attrs.readField); // outputs and empty string 
     } 
    }; 
});

即使singleContact._id值在正確呈現在頁面上h2，並正確顯示在通過記錄（attrs）返回的對象中，記錄變量attrs.readField直接返回一個空字符串。在示例二中用someScope做同樣的事情，一切正常，即attrs.someScope的console.log返回'Foo'。

很顯然，它是如何在控制器中設置的問題：例1（singleContact）來自函數調用api服務，例2（someScope）是直接聲明。

angular.module('myApp') 
.controller('EditModalCtrl', function ($scope, $modalInstance, $rootScope, apiCalls, id) { 

    apiCalls.getContact(id) 
     .success(function (data) { 
      console.log(data); 
      $scope.singleContact = data; 
     }); 

    $scope.someScope = 'Foo'; 

});

在讓我明白這將是非常讚賞任何幫助，我是新來的角度，並有我錯過這裏的東西很重要，感謝的感覺。

來源

2014-10-02 brenit0

一個問題/猜測：'console.log（attrs）'寫在控制檯的東西。 *然後*你點擊那個東西，'readField'被正確地擴展。我*猜測*是指令運行時，服務*尚未*返回，因此'attrs.readField'爲空。在出現在控制檯和點擊它之間的時間內，服務已返回，因此單擊展開該對象將產生正確的結果。 – 2014-10-02 07:28:15

那麼真正讓我失望的是正確的信息就在控制檯中，所以這是有道理的。沒有想到查看對象所花費的時間。有一個方向看，謝謝。 – brenit0 2014-10-02 08:00:36

singleContact._id在鏈接函數運行時未綁定到屬性，所以傳遞一個空字符串作爲readField值。嘗試這種方法，而不是：

<form> 
    <div read-field="singleContact._id" ></div> 
    <h2>{{ singeContact._id }}</h2> 
</form> 

angular.module('myApp') 
.directive('readField', function() { 
    return { 
     link: function (scope, element, attrs) { 
      console.log(attrs); // outputs correct object with attrs.readField "523c2..mongo_id.." 
      console.log(scope.$eval(attrs.readField)); // should evaluate the expression on the current scope 
     } 
    }; 
});

來源

2014-10-02 07:43:20 Fordio

作用域對象在Angular指令中未定義

回答

相關問題