Question

假设我有这个自定义指令

<div ng-controller="MyCtrl">
    <select ng-model="selectBox">
         <option value="test">test</option>
    </select>

    <my-directive select="selectBox"></my-directive>
</div>

myApp.directive('myDirective', function () {
    return {
        restrict:'EA',
        function (scope, element, attr) {
           var atrib = scope.$eval(attr.select)

           console.log(atrib);
    }
   }
});

每当我执行console.log命令时，它返回undefined值。我听说过孤立的范围。但对于这种环境，我不想使用孤立的范围..

问题是如何实现这些目标？

更新我根据@dfsq答案更新问题，但它仍然没有任何内容

更新显然，如果我使用范围包装attr.select。$ eval并从{{}}更改属性，这是对象包装我只使用字符串它将起作用！非常感谢你的回答！

Answer 1

不确定如何获得任何控制台日志输出。你定义指令的方式是不可能的。您使用指令作为元素，但其定义表明它将用作属性。将其更改为：

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attr) {
            var atrib = attr.select;
            console.log(atrib);
        }
    }
});

同样，您需要将resrict属性声明为E“元素”。如果省略它（如果你只是提供链接功能就会发生），A“属性”是默认的。

Answer 2

如果您想在select中的每个选项更改后在控制台中看到新值，您可以通过以下方式进行操作。

<div ng-controller="MyCtrl">
    <select ng-model="selectBox" ng-options="item for item in items"></select>
    <my-directive select="{{selectBox}}"></my-directive>
</div>

JS代码：

myApp.directive('myDirective', function () {
    return {
        restrict:'E',
        scope: {
            select: '@select'
        },
        link: function (scope, element, attr) {
           scope.$watch('select', function(newValue){
               console.log(attr.select); //changed every time after a new select
           });
    }
   }
});

function MyCtrl($scope) {
    $scope.items = ['test1', 'test2', 'test3'];
    $scope.selectBox = $scope.items[0]; //default select's value
}

我已为您附上JSFiddle示例。

获取属性对象而不使用隔离范围angularjs自定义指令

2 个答案: