Question

嘿大家我正在调用指令并将硬编码传递给指令，但它没有通过。我不能在我的代码中出现什么问题。代码：

我正在调用类似这样的指令：

<div ng-controller="EmployeeController">
    <off-balance user-key="18" collapse-hide="true"></off-balance>
</div>

指令代码：

App.directive('offBalance', ['OffService', 'toaster', OffBalance]);

function OffBalance(OffService, toaster, ) {
    var directive = {
            link: link,
            restrict: 'E',
            templateUrl: 'app/modules/sometemplate.html',
            scope: {
                userKey: '=',
                collapsehide: '=?',
            },
            scope: true 

        }
    }

    return directive;

    function link(scope, element, attr) {

        scope.$watch('userKey', function (newVal) {
            alert("userKey" + newVal);

        });

        scope.$watch('collapsehide', function (newVal) {
            alert("collapsehide" + newVal);
        });
    }
}

userkey和collapsehide都是未定义的。请帮我解决这个问题

Answer 1

请在下面找到工作的plunker：

https://plnkr.co/edit/y75jQhDCWlEBb2pDNKEs?p=preview

var App = angular.module('app', []);

App.directive('offBalance', [OffBalance]);

function OffBalance() {
    var directive = {
    link: link,
    restrict: 'E',
    scope: {
        userKey: '=',
        collapseHide: '=?'
    }
}
return directive;
}


function link(scope, element, attr) {
    scope.$watch('userKey', function(newVal) {
    alert("userKey" + newVal);
});
console.log(scope);
scope.$watch('collapseHide', function(collapseHide) {
    alert("collapsehide" + collapseHide);
});
}

以下是需要注意的要点：

scope在你的指令中是两次。
collapsehide应该是collapseHide as angular strict to name of attribute and directive。
return directive应位于function OffBalance()

Answer 2

删除scope: true并在观察者中将collapsehide: '=?'替换为collapseHide: '=?'个身份

指令属性值未传递

2 个答案: