在指令中使用范围后，我的网站不再响应答案

【问题标题】：my website is not responsive anymore after using scope in the directive在指令中使用范围后，我的网站不再响应
【发布时间】：2015-12-01 11:51:29
【问题描述】：

我已经使用引导程序来使网站具有响应性，直到我将以下范围添加到指令以为定义的图片框架元素创建属性：

bootApp.directive('pictureFrame', function(){
    return{
        restrict:"E",
        templateUrl:"src/templates/directives/pictureFrame.html",
        scope:{
            picture:"@picture",
            border:'@border'
        }
    };
});

这就是我在 html 页面中使用的方式：

<picture-frame   picture="src/img/screen.jpg"  border="yellow"  >
</picture-frame>

使用这些代码后，我的网站不再响应。可能是什么原因？

【问题讨论】：

“不响应”是什么意思？如果您的意思是您不能动态更改picture 和border 的值，这是可以预料的，因为您绑定的是文字值。您应该使用作用域变量并对其进行绑定，改用'='。
如何将响应性与指令联系起来？你应该在这里添加更多关于你的问题的解释。旁注你的html应该是<picture-frame picture="'src/img/screen.jpg'" border="'yellow'" > </picture-frame>
我的意思是当我恢复页面时，图片不会改变大小，因此不适合相框。

标签： javascript html angularjs twitter-bootstrap

【解决方案1】：

我猜你想对你的作用域属性进行双向绑定。但是你有一个单向绑定。如果这就是您所说的没有“更具响应性”的意思，而不仅仅是将您的范围更改为：

scope:{
            picture:"=picture",
            border:'=border'
        }

【讨论】：

【解决方案2】：

你的意思是这样Plunk？

你的指令会变成这样（使用 plunk 的代码）：

app.directive('pictureFrame', function(){
    return{
        restrict:"E",
        templateUrl:"pictureFrame.html",
        scope:{
            picture:"=",
            imageClass:"="
        },
    };
});

控制器的核心要素：

$scope.index = 1;

var pictures = [
  "http://us.123rf.com/450wm/bagotaj/bagotaj1205/bagotaj120500016/13546752-coffee-cup-concept.jpg?ver=6",
  "http://us.123rf.com/450wm/peshkova/peshkova1208/peshkova120800337/14768439-young-man-and-business-tags.jpg?ver=6",
  "http://us.123rf.com/450wm/dimro/dimro1205/dimro120500005/13554732-coffee-cup-stylish-shape.jpg?ver=6"
];

var classes = ["yellow", "red", "blue"];

$scope.SetPicture = function() {
  $scope.picture = pictures[$scope.index - 1];
};

$scope.SetClass = function() {
  $scope.imageClass = classes[$scope.index - 1];
};

你可以这样设置：

<picture-frame picture="picture" image-class="imageClass"></picture-frame>

为了便于使用，我使用了图像类而不是边框。

PS：如果名称相同，我认为提供完整标识符 ("=picture") 没有用。

PPS：显然 Plunk 是一个理想化的版本，需要适应现实世界。

【讨论】：