Question

我的角度和指令的代码是这个

angular.module('myapp',[])
.controller('MainController',MainController)
.directive('myDirective',MyDirective);

MainController.$inject = ['$scope'];
MyDirective.$inject = ['$scope'];

function MainController($scope){

    $scope.name = "John";
    $scope.value = 20;
    $scope.color = "Blue";

}

function MyDirective($scope){

    var ddo = {
        restrict : 'AE',
        controller: 'MainController',
        templateUrl : 'mydirective.html'
    }

    return ddo;
}

它显示错误

angular.min.js:122 Error: [$injector:unpr] http://errors.angularjs.org/1.6.0/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20myDirectiveDirective

为什么会这样以及如何解决这个问题。？

Answer 1

我已为上述问题添加了示例，并略微编辑了代码。

您不应在内部指令中注入 $ scope 。在我的示例中，我已将templateUrl移除到tempate，因为我只在那里创建了内联模板。

尝试运行代码段。它会给你更好的想法。

angular.module('myapp',[])
.controller('MainController',MainController)
.directive('myDirective',MyDirective);

MainController.$inject = ['$scope'];


function MainController($scope){

    $scope.name = "John";
    $scope.value = 20;
    $scope.color = "Blue";
    alert('hey!!! controller working fine');
}

function MyDirective(){

    var ddo = {
        restrict : 'AE',
       
        template : '<h1>Directive working fine</h1>'
    }

    return ddo;
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MainController">
<my-directive></my-directive>
</div>
</body>
</html>

希望，这可以解决您的问题。谢谢:)）

自定义指令在AngularJS中不起作用

1 个答案: