javascript - 无法访问指令 Controller 中的 $scope 值

Question

我有一个简单的应用程序，但由于某些原因我无法访问指令 Controller 中的 $scope 值。

app.js

var myApp = angular.module('myApp',['ngAnimate']);

controller.js

myApp.controller('controller1',['$scope',function($scope) {
    $scope.helloText = 'text';
}])

directive.js

myApp.directive('myPanel',function(){
    return {
        restrict : "E",
        scope : {
            someText : "="
        },
        templateUrl : 'someTemplate.html'
        controller : function($scope) {
            console.log($scope.someText);// this is undefined
        }
    };
});

someTemplate.html

<h1>This is the text {{someText}}</h1>

ma​​in.html

<div ng-controller="controller1">
    <my-panel someText="helloText"></my-Panel>
</div>

需要一些指导来了解我做错了什么？

Answer 1

您的外壳已关闭。

<my-panel some-text="helloText"></my-Panel>

您可以在 guide 中阅读规范化

直接从源头

规范化

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

归一化过程如下:

从元素/属性的前面去掉 x- 和 data-。将 :、- 或 _ 分隔的名称转换为驼峰命名法。