2 种方式绑定不适用于隔离范围内的指令

Question

我只是想做一个简单的指令，但出于某种原因，2 种方式的数据绑定在我的指令中不起作用。从我的代码中，您可以看到指令中的控制台日志将读取我在 $scope.displayMaintenance 变量中的正确信息，但我无法在我的变量中更改它指令。

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;
  }
};
})

有什么建议吗？

Answer 1

检查您的指令是否可以找到模板 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>

Answer 2

问题可能是您在另一个隔离范围内使用指令。

我创建了一个样本：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 点特别适用于您所看到的行为。

2 种方式绑定不适用于隔离范围内的指令

2 way binding not working on directive in isolated scope

angularjs

angularjs-directive

angularjs-scope