不是最佳做法

Question

我有这个元素：

<img data-address ng-click="dishInfo = dish">

指令：

app.directive('address', [
    function () {
        return {
            restrict: 'A',
            link: function($scope, element, attrs) {
                element.bind('click', function() {
                        console.log($scope.dishInfo);
                        $(".modal").modal();  
                })
            }
        }
    }
])

当我点击我的控制台中的图像时，我得到了Resource： Resource { id=1, dishes={...}, category=[1],...} 在我的.modal此代码中：

<div class="partner fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
             {{ dishInfo.id }}
         </div>
     </div>
 </div>

但是当打开模态窗口（点击图像后）时 - 我看到空块，没有id。为什么呢？

Answer 1

我想通了

不是最佳做法

（如果你想以同样的方式继续这样做）

Plunker：http://plnkr.co/edit/VCewVczN4t54PQ6bf1Rh?p=preview 改变

ng-click="dishInfo = dish"

到

ng-click="$parent.dishInfo = dish"

事实证明，您必须以$ parent对象的形式显式引用范围，因为ng-click会创建它自己的范围。

最佳实践

Plunker：http://plnkr.co/edit/8VOFkOP1r1RfILZ7gKfc?p=preview

更改

ng-click="dishInfo = dish"

到

ng-click="setDish(dish)"

在js文件中有一个名为setDish的方法，它可以执行类似

的操作

$scope.setDish = function(dish) {
    $scope.dishInfo = dish;
}

Answer 2

您应该在指令中使用scope对象来实现此目的：

app.directive('address', [
    function () {
        return {
            restrict: 'A',
            scope : {
                dishinfo: "="
            }
            link: function($scope, element, attrs) {
                element.bind('click', function() {
                        console.log($scope.dishInfo);
                        $(".modal").modal();  
                })
            }
        }
    }
])

在你的部分：

<img data-address dishinfo="dish">

并且在控制器中声明了包含此部分的dish的值。

希望有所帮助。

在ng-click中设置指令中的$ scope var

2 个答案:

不是最佳做法

最佳实践