Question

我正在使用angularjs.问题是我在编译函数之后在指令中编写了一个控制器，并且通过编译函数的输出如图所示。即＃34;首先在编译＆＃34;。但是控制器的输出没有显示，它显示错误，错误显示在我发布的图像中。请帮我解决一下这个。我发送代码

＆＃13;

var app = angular.module("myapp", []);
app.controller('ctrl', ['$scope', function ($scope) {
   
    $scope.emp = [{ name: "Day", age: "25", salary: "30000", place: "sydney", color: "#FF5733" },
        { name: "Dickinson", age: "34", salary: "6000", place: "disney", color: "#FAB304" },
        { name: "Domeyko", age: "27", salary: "9000", place: "newyork", color: "#0ED1B3" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#896BBB" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#387037" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#F3AE1B" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#FAB304" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#D10E7B" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#0EC8D1" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#FFC300  " },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#D10E5B" },
        { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#13D0E1" }];
}]);
app.directive('showDetails', function ($interpolate) {
    return {
        //templateUrl: 'showDetails.html'
        compile: function (tElement, tAttributes) {
            console.log(tAttributes.text + "-in compile");
        },
        controller: function ($scope, $element, $attri) {
            var v = $interpolate($attri.text)($scope);
            //console.log($attri.text + "-in controller");
            console.log(v + "-in controller");
        }
    }
     
});

＆＃13;

 <script src="../Scripts/angular.min.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.min.js"></script>

    <script src="../js/app.js"></script>
    <script src="../js/ChildCtrl.js"></script>
    
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->

   
</head>

<body style="background-image: url('../images/uRzTkNW.jpg');" ng-controller="ctrl">
   
    <div ng-repeat="emps in emp" class="col-md-3">
        <div show-details text="first">
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 1

你的问题就在这一行：

controller: function ($scope, $element, $attri) {

如果单击错误消息中给出的链接，它可能会解释所有这些，但问题是您正在尝试将名为$attri的服务注入到您的控制器中，但是没有该名称的角度服务：你可能想要$attrs。 $scope，$element，$attrs，$transclude都可以像其他角度服务一样注入控制器。

如何使控制器在自定义指令中工作？

1 个答案: