Question

我使用bootstrap使网站响应，直到我将下面的范围添加到指令中为定义的pictureFrame元素创建属性：

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>

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

Answer 1

我想您希望对范围属性进行双向绑定。但是你有单向绑定。如果这是你的意思，没有“更具响应性”而不仅仅是将你的范围改为：

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

Answer 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是一个理想化的版本，需要真实的适应。

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

2 个答案: