2方式綁定不起作用在隔離範圍指令

我只是想做一個簡單的指令，但由於某種原因，2方式數據綁定不起作用在我的指令。從我的代碼中，您可以看到一個控制檯登錄該指令，它將讀取我在$ scope.displayMaintenance變量中的正確信息，但我無法在指令中更改它。2方式綁定不起作用在隔離範圍指令

HTML：

<maintenance-banner display-maintenance="displayMaintenance"></maintenance-banner>

控制器：

$scope.displayMaintenance = false; 

$scope.$watch('displayMaintenance', function(data) { 
    console.log("i changed!: " + data); 
});

指令：

.directive('maintenanceBanner', function() { 
return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
    displayMaintenance: '=' 
    }, 
    templateUrl: '/partials/navbar/maintenance-banner.html', 
    link: function(scope) { 
    console.log(scope.displayMaintenance); 
    scope.displayMaintenance = true; 
    } 
}; 
})

有什麼建議？

來源

2015-04-06 m0ngr31

你可能會創建一個JS Bin或重新創建問題的東西嗎？我沒有看到任何明顯的錯誤。我通常做我的控制器有點不同，但不應該導致問題。 – SethGunnells

http://jsbin.com/jalojurewe/1/edit但我不能在JSBin上重現錯誤。 – m0ngr31

然後問題必須是這裏顯示的邏輯以外的東西。最大的問題通常是拼寫錯誤或使用錯誤的符號（camelcase而不是破折號，反之亦然）。在這一點上，我唯一可以說的就是嘗試再次編寫控制器和指令，儘可能簡化事情，並以小塊形式構建更復雜的邏輯。這樣，如果出現問題，你會更好地瞭解它發生的情況。 – SethGunnells

問題可能是你用你的指令內的另一個隔離範圍。

我已經創建了一個示例：http://jsfiddle.net/2063n7te/

改變使用分配的模型值替換其可以不存在於親範圍所反射的模型對象。

簡而言之：不要將原語直接綁定到範圍。

代替

$scope.text = "foo";

使用

$scope.input = { 
    text: "foo" 
};

一個良好的閱讀是：http://www.thinkingmedia.ca/2015/01/learn-how-to-use-scopes-properly-in-angularjs/ 點＃4特別適用於您所看到的行爲。

來源

2015-04-06 21:44:02

這就是我最終做的事情，但是你能向我解釋爲什麼它有時會奏效嗎？我現在在我的應用程序中有一個現有的指令，我遇到了同樣的問題，但其中約25％的頁面正在工作，它具有與不工作的相同的實現。 – m0ngr31

孤立的作用域和子作用域是有區別的。當您在子作用域上執行操作並對作用域執行賦值時，可以將該屬性從單獨的父作用域屬性中斷開。這是可以的，只要你只讀取值，但修改意味着取代在這種情況下。 –

檢查您的指令是否可以找到模板URL。

工作對我來說：

var app = angular.module('app',[]); 
 
app.controller('ctrl', function($scope) { 
 
    $scope.displayMaintenance = false; 
 

 
$scope.$watch('displayMaintenance', function(data) { 
 
    alert("i changed!: " + data); 
 
}); 
 
}); 
 
app.directive('maintenanceBanner', function() { 
 
return { 
 
    restrict: 'E', 
 
    replace: true, 
 
    scope: { 
 
    displayMaintenance: '=' 
 
    }, 
 
    template: '<div>{{displayMaintenance}}</div>', 
 
    link: function(scope) { 
 
    console.log(scope.displayMaintenance); 
 
    scope.displayMaintenance = true; 
 
    } 
 
}; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    
 
<maintenance-banner display-maintenance="displayMaintenance"></maintenance-banner> 
 
    </div>

來源

2015-04-06 20:07:49 pixelbits

這似乎不是問題。當我做一些像$ scope.displayMaintenance.display = false;它似乎解決了這個問題。我不知道爲什麼。特別是因爲你的工作似乎很好。 – m0ngr31

2方式綁定不起作用在隔離範圍指令

回答

相關問題