Question

我只是想做一个简单的指令，但由于某种原因，双向数据绑定不能在我的指令中工作。从我的代码中你可以看到指令中的控制台日志将读取我在 $ scope.displayMaintenance 变量中的正确信息，但我无法在我的指令中更改它。 / p>

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

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

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

Answer 2

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

适合我：

＆＃13;

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

＆＃13;

<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>

＆＃13;

2路绑定不适用于隔离范围内的指令

2 个答案: