角度指令範圍確實/不通過鏈接功能

我有一個似乎完全瘋狂的問題！我使用了一個指令，該指令將綁定到其作用域的某些屬性從父作用域變量中取值。所有非常正常.. ...除了當我做console.log（範圍）時，屬性正常顯示作爲範圍對象的屬性與期望值，但當我做console.log（scope.myAttr），然後我得到undefined ！角度指令範圍確實/不通過鏈接功能

有沒有人遇到過這樣的事情？

// In parent directive: 
 

 

 
scope.datepickerOptions.enableTime = false; 
 

 

 

 

 
// In directive: 
 

 
angular.module('myModule') 
 
\t .directive('datepicker', function() { 
 
\t \t return { 
 
\t \t \t require: 'ngModel', 
 
\t \t \t restrict : 'A', 
 
\t \t \t scope: { 
 
\t \t \t \t format: '@', 
 
\t \t \t \t enableTime: '=', 
 
\t \t \t \t minDate: '@', 
 
\t \t \t \t maxDate: '@', 
 
\t \t \t \t mode: '@' 
 
\t \t \t }, 
 
\t \t \t link : function(scope, element, attrs, ngModel) { 
 
\t \t \t \t console.log("scope") 
 
\t \t \t \t console.log(scope) 
 
\t \t \t \t // displays all properties with expected values 
 
       //=> scope.enableTime: false 
 

 
\t \t \t \t console.log("enableTime") 
 
\t \t \t \t console.log(scope.enableTime) 
 
     // undefined (!!!) 
 
     
 
     
 
     ...

// In parent template: 
 

 
... 
 

 
<input 
 
    type="text" 
 
    id="events_date" 
 
    name="events_date" 
 
    ng-model="events.selectedDate" 
 
    placeholder="Select Date Range" 
 
    ng-change="setQueryDate()" 
 
    format="d M Y" 
 
    mode="range" 
 
    enable-time="datepickerOptions.enableTime" 
 
    max-date="today" 
 
    datepicker> 
 
    
 
    
 
    ...

我也試過：啓用時間= 「{{datepickerOptions.enableTime}}」與enableTime： '@'

，我也得到同樣的瘋狂，當我做 console.log（attrs）和console.log（attrs.enableTime）

同樣的事情，當我把一個控制器與$ scope參數： console.log（$ scope）display一切正常，但console.log（$ scope.enableTime）給出了undefined

來源

2017-06-21 Dimitris Papazacharias

嘗試使用'attrs'。鏈接函數執行時，範圍屬性尚未設置。之後它會被設置。這就是爲什麼當你嘗試直接引用它時你會得到'undefined'。控制檯中的範圍對象顯示範圍的最終狀態。 – Hoyen

如果您確實需要使用'範圍'對象，請使用指令的控制器功能而不是鏈接功能。 – Hoyen

但不會attrs.enableTime具有「datepickerOptions.enableTime」作爲一個值？爲什麼項目中的其他指令正常工作？它是**限制：「A」**是否會發生這種行爲？ –

我沒有看到你的指令中的任何範圍變量。如果您想保留任何屬性值scope變量，只是做這樣的事情：

scope.yourVariable = attrs.yourAttribute;

來源

2017-06-21 13:23:55

你是什麼意思？什麼是這一切：範圍：{ \t \t \t \t格式： '@'， \t \t \t \t enableTime： '='， \t \t \t \t的minDate： '@'， \t \t \t \t的maxDate：「 @」， \t \t \t \t模式： '@' \t \t \t}， ?? –

@DimitrisPapazacharias，它只是一個指令，但你沒有聲明任何**範圍變量**。所以你可以通過像attrs.neededAttribute這樣的'attrs'參數來訪問你的屬性。或者，如果您想將此屬性添加到作用域，則需要執行'scope.yourVariable = attrs.neededAttribute'。 –

我認爲正在發生的事情是，你正在設置enableTime創建指令之後。如果是這種情況，您可以使用'ng-if'指令來檢查它是否在加載之前先被定義。

這裏是什麼，我認爲正在發生的一個例子：

var app = angular.module('test', []); 
 

 
app.controller('MainCtrl', function($scope, $timeout) { 
 
    $scope.datepickerOptions = {} 
 
    $timeout(function() {  
 
    $scope.datepickerOptions.enableTime = false; 
 
    }, 500); 
 
}); 
 
app.directive('datepicker', function() { 
 
    return { 
 
    restrict: 'A', 
 
    scope: { 
 
     enableTime: '=' 
 
    }, 
 
    link: function(scope, element, attrs, ngModel) { 
 
     console.log("scope") 
 
     console.log(scope) 
 
     // displays all properties with expected values 
 
     //=> scope.enableTime: false 
 

 
     console.log("enableTime") 
 
     console.log(scope.enableTime) 
 
    } 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="test"> 
 

 
<head> 
 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <input datepicker ng-if="datepickerOptions.enableTime != null" enable-time="datepickerOptions.enableTime" /> 
 
</body> 
 
</html>

來源

2017-06-21 14:01:10 Hoyen

我終於解決了在$ timeout（）中包裝一些scope.variables初始化的問題，但它不像一個乾淨的解決方案。我從來沒有遇到過這個，真正的問題是爲什麼我使用的所有其他指令，不像那樣行爲 –

@DimitrisPapazacharias它真的取決於代碼。例如，另一個解決方法是初始化'$ scope.datepickerOptions = {enableTime：true}'如果沒有更多信息或示例，我認爲我無法正確回答它。 – Hoyen

看來，如果我做

$timeout(function(){ 
 
    console.log(scope.enableTime) 
 
}, 600) 
 

 
//and in parent directive 
 

 
$timeout(function(){ 
 
    scope.datepickerOptions.enableTime = true //or whatever 
 
}, 500)

一切˚F alls到位。但在我看來，這似乎不是一個乾淨的解決方案。畢竟，我從來沒有遇到過像這樣的事情，以及如何確保何時他/她的指令將加載並呈現？

來源

2017-06-21 16:08:37

你必須明白JavaScript是同步執行的。我認爲問題在於你對JavaScript的工作方式沒有充分的理解。您可能想要研究並嘗試瞭解超時在JavaScript中的工作原理。 – Hoyen

角度指令範圍確實/不通過鏈接功能

回答

相關問題