Html 无法访问$scope模型

在我的主html中，我有一个加载模板的视图

<div data-ng-view></div>

在这个页面（模板）上，我有一个加载另一个html文件的指令

app.directive('ngPost', function () {
'use strict';

return {
    restrict: 'A',
    templateUrl: 'postbox.html'
};


});

然后，我在events.html页面上使用

在邮箱中，我有两个输入字段和一个按钮

<input type="text" id="user" data-ng-model="username" /> 
<input type="text" id="mess" data-ng-model="message"/>
<button data-ng-click="Add(eventid-1, username, message)">Post</button>

清理没有发生，我不知道为什么。具有此Add方法的我的控制器将

包装在主html文件中，因此它是最外层的控制器，应该可以访问内部的所有$scope模型。为什么它不起作用？

---

请注意，清除之前的操作不会出现任何问题

您的添加方法在父范围内。父对象的作用域无法看到它的子对象，它的工作方式正好相反。消息和用户名属性在指令的子作用域中定义。您可以从子对象引用父对象属性，但不能反过来引用

如果将scope:false和transclude:false添加到指令中，它将不会创建自己的范围，而是使用其父级的范围，因此您的指令将如下所示：

 angular.module('app', []).controller("myController",myController);

    function  myController($scope){
        var ctrl = this;
        ctrl.hello ="Hello"

    };

    angular.module('app').directive("childThing", function() {
        return {
            template: '<div>{{message}}</div><div>{{username}}</div>',
            scope: false,
            transclude: false,
            controller: function($scope) {
                $scope.username="Mike Feltman"
                $scope.message="Hi Mike"
            }
        }
    })

    <div ng-controller="myController as ctrl">
        {{username}} in the parent.
        <div>{{ctrl.hello}}</div>
        <child-thing></child-thing>
    </div>

angular.module（'app'，[]）.controller（“myController”，myController）；
函数myController（$scope）{
var ctrl=this；
ctrl.hello=“hello”
};
angular.module（'app'）。指令（“子对象”，函数（）{
返回{
模板：{{message}}{{username}}，
范围：假，
排除：错误，
控制器：功能（$scope）{
$scope.username=“Mike Feltman”
$scope.message=“你好，迈克”
}
}
})

您可以从父级访问指令添加到范围的元素，如下所示：

 angular.module('app', []).controller("myController",myController);

    function  myController($scope){
        var ctrl = this;
        ctrl.hello ="Hello"

    };

    angular.module('app').directive("childThing", function() {
        return {
            template: '<div>{{message}}</div><div>{{username}}</div>',
            scope: false,
            transclude: false,
            controller: function($scope) {
                $scope.username="Mike Feltman"
                $scope.message="Hi Mike"
            }
        }
    })

    <div ng-controller="myController as ctrl">
        {{username}} in the parent.
        <div>{{ctrl.hello}}</div>
        <child-thing></child-thing>
    </div>

父项中的{username}}。
{{ctrl.hello}

使用您的模板更新： 父项中的{username}}。 {{ctrl.hello}

Javascript:

函数myController（$scope）{ var ctrl=this； ctrl.hello=“hello”

$scope.add=function（）{
警报（$scope.username）
}
};
angular.module（'app'）。指令（“子对象”，函数（）{
返回{
模板：“”，
范围：假，
排除：错误，
}
})

相信您的控制台中应该有错误，但不认为它能够正确解析此eventid-1。可以添加

调试器行，查看它是否被触发。最后一点很好，不要使用$scope作为您的模型，而是让它指向一个作为您的模型的对象，google angular Prototypic Inheritation，然后查看SOpost@shaunhusain调试器将触发。没有错误，我排除的操作使用了输入中的信息（这没有问题），如果在add方法中使用console.log（$scope.message）和console.log（$scope.username），那么输出是什么？@MikeFeltman未定义，bothIt看起来像是范围不匹配。指令的作用域与控制器的作用域不同如果设置rootScope（$rootScope）只是为了检查它是否正确，会发生什么情况？已更新以提供一种方法来执行此操作。@MikeFeltman是否需要在指令中定义控制器？由于我的方法在myController中，我可以使用myController（例如您的示例）吗？不需要指令级的控制器。使用ng模型定义属性的方式将在父对象上显示它们。我也在答案中添加了它。@MikeFeltman除了在指令中将scope和translude添加到false之外，还有什么需要修改的吗？因为在我添加了我所知的两行之后，问题仍然存在。您使用的是什么版本的Angular？
    $scope.add = function() {
        alert($scope.username)
    }

};

angular.module('app').directive("childThing", function() {
    return {
        template: '<input type="text" id="user" data-ng-model="username" /><input type="text" id="mess" data-ng-model="message"/>',
        scope: false,
        transclude: false,
    }
})