获取属性对象，无需使用隔离范围angularjs自定义指令

let say that I have this custom directive

假设我有这个自定义指令

<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);
    }
   }
});

whenever I execute the console.log command it returned with undefined value. I heard about isolated scope. But for this environment I don't want to use isolated scope..

每当我执行控制台时。日志命令返回未定义的值。我听说了隔离范围。但是对于这种环境，我不想使用隔离范围。

the question is how can I achieve these ?

问题是我怎样才能做到这些?

UPDATE I update the question based on @dfsq answer but it still got nothing

我更新了基于@dfsq答案的问题，但仍然一无所获

UPDATE apparently if I wrapped the attr.select using scope.$eval and change the attribute from {{}} which is object wrapping I use string only it will work! thank you so much for your answer guys!

如果我包装了attr，显然会更新。选择使用范围。$eval并从{{{}}中修改属性，{}是对象包装，我只使用字符串，它会工作!非常感谢你们的回答!

2 个解决方案

#1

Not sure how you even get any console log output. It's not possible with the way you are defining your directive. You are using directive as an element, however its definition states it to be used as an attribute. Change it to this:

甚至不知道如何获得控制台日志输出。你定义指令的方式是不可能的。您正在使用指令作为元素，但是它的定义声明它将被用作属性。改成这样的:

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

Again, you need to declare resrict property as E "element". If you omit it (happens if you just provide a link function) it's A "attribute" be default.

同样，您需要将resrict属性声明为E“element”。如果您省略了它(如果您只是提供一个链接函数)，那么它就是默认的“属性”。

#2

If you want to see new value in your console after every option change in select, you can do it by the following way.

如果您希望在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 code:

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
}

I've attached JSFiddle example for you.

我给你附上了JSFiddle的例子。

#1