Question

我使用min将范围值传递给指令。第一次加载时我得到link: function(scope, elm, attrs) { scope.$watch(function (){return attrs.min}, function (newValue, oldValue) { console.log('oldValue=' + oldValue); console.log('newValue=' + newValue); //do something }); console.log(attrs.min); }的未定义值但是使用$ watch可以正常工作。 fiddle

var myobject = {
    prop1: "value1",
    prop2: 2,
    prop3: new Date(),
    prop4: true,
    prop5: function () { return "Hello world!"; },
    prop6: null,
    prop7: { x: 1, y: 2, z: "some text"}
};
$("#grid").jqGrid({
    colModel: [
        { name: "name", width: 80 },
        { name: "type", width: 80 },
        { name: "value", width: 400 }
    ],
    datatype: "jsonstring",
    datastr: myobject,
    jsonReader: {
        repeatitems: false,
        root: function (obj) {
            var prop, result = [], value;
            for (prop in obj) {
                if (obj.hasOwnProperty(prop)) {
                    value = obj[prop];
                    result.push({
                        name: prop,
                        type: $.type(value),
                        value: $.type(value) === "object" ?
                                JSON.stringify(value) :
                                String(value)
                    });
                }
            }
            return result;
        },
    },
    iconSet: "fontAwesome",
    autoencode: true,
    rownumbers: true,
    cmTemplate: { autoResizable: true },
    autoResizing: { compact: true },
    viewrecords: true,
    pager: true
});

Answer 1

为什么不使用 $ observe ？

app.directive('exampleDirective1', function() {
    return {
      restrict: 'E',
      link: function(scope, elm, attrs) {

        attrs.$observe('min', function(newValue) {
          console.log(newValue);
        });

    }
};

}）;

Answer 2

似乎在指令为postlink之前未评估{{message}}。

您也可以使用范围：

app.directive('exampleDirective1', function() {
    return {
        restrict: 'E',
        scope: {
            min: '='
        },
        link: function(scope, elm, attrs) {
             scope.$watch('min', function (newValue, oldValue) {
                console.log('oldValue=' + oldValue);
                console.log('newValue=' + newValue);
                //do something
            });
            console.log(scope.min);
            console.log(attrs.min);
        }
    };
});

和

With template: <example-directive1 min="message"></example-directive1>

Answer 3

嗯，这很奇怪，用compile，prelink和postlink做了很多日志的例子，得到了奇怪的结果：

function MyCtrl($scope) {
    $scope.message = 'hello';
    console.log('$scope.message set to hello');   
}

app.directive('exampleDirective1', function() {
    return {
        restrict: 'E',
        compile: function(tElement, tAttrs) {
          console.log('currently at compile, attrs.min = ', tAttrs.min);

            return {
              post: function postLink(scope, elm, attrs) {
                 scope.$watch(function (){return attrs.min}, function (newValue, oldValue) {
                    console.log('currently, attrs.min = ', attrs.min);  
                });
                console.log('currently at postlink, attrs.min = ', attrs.min);                       
              },
              pre: function prelink(scope,elm , attrs) {
                console.log('currently at prelink, attrs.min = ', attrs.min);  
              }
            };
        }
    };
});

http://jsfiddle.net/qdzLhpf9/

预链接运行时已设置范围值。但是，这些论点似乎是在postlink和prelink之间进行评估的。

编辑： 经过一些挖掘之后，似乎$ compile会在你的角度版本中将args初始化为'undefined'。请参阅第4434行的https://code.angularjs.org/1.0.0/angular-1.0.0.js。

在指令angularjs中，attrs值未定义

3 个答案: