AngularJS - 指令双向绑定(bind)不适用于隔离范围

Question

我正在构建一个演示天气应用程序，使用 Controller /提供程序和 2 个指令(具有独立的范围，一个指令用于渲染一周的天气预报，另一个指令用于在页面顶部显示点击的工作日天气预报)。

单击一周中的某一天时，我尝试在屏幕顶部显示单击的工作日。 如果我删除指令中的隔离范围，效果很好，但它不适用于隔离范围。

任何人都可以建议我在这里缺少什么吗？

链接:具有隔离范围的指令:http://plnkr.co/edit/L9AcMv?p=preview (这不起作用？我在这里错过了什么？)

代码供您引用:

    app.directive('myWeather', function() {
      return {
        restrict: 'EA',
        transclude: 'true',
//If I comment below scope then it works fine though it does not if I am using isolated scope
        scope: {
          place: '=' //Two-way data binding
        },
        templateUrl: 'my-weather.html'
      };
    });

    app.directive('selectedWeather', function() {
      return {
        restrict: 'EA',
        transclude: 'true',
//If I comment below scope then it works fine though it does not if I am using isolated scope
        scope: {
          place: '=' //Two-way data binding
        },
        templateUrl: 'selected-weather.html'
      };
    });

非常感谢，

Answer 1

当您使用隔离作用域时， Controller 作用域的 setSelectedItem 方法是不可见的。

解决方案:

将 setSelectedItem 添加到指令 isoalted 范围。+还添加双向数据绑定(bind)以进行预测。

工作于:http://plnkr.co/edit/e5ApIg?p=preview

所做的更改是:

app.directive('myWeather', function() {
  return {
    restrict: 'EA',
    transclude: 'true',
    //If I comment below scope then it works fine though it does not if I am using isolated scope
    scope: {
      place: '=', //Two-way data binding
      /// here added a two way data binding to forecast too
      forecast: '='
    },
    templateUrl: 'my-weather.html',
    /// here added setSelectedItem to isolated scope.
    link: function (scope,e,a) {
      scope.setSelectedItem = function(forecast) {
          scope.forecast = forecast;
      }
    }
  };
});

以及index.html

<div my-weather place="place" forecast="forecast"></div>