范围变量未传递给使用 ng-include 包含的模板答案

【问题标题】：scope variable not getting passed to template included using ng-include范围变量未传递给使用 ng-include 包含的模板
【发布时间】：2016-04-22 03:00:20
【问题描述】：

范围变量未传递给通过 ng-include 标记包含的模板。我希望 generic.html 页面附带 page1.html 和 page2.html。我正在获取静态内容嗨，欢迎这样，但是当我单击 controller1.js 中的方法时，没有打印出包含在 angular 指令中的名称。我尝试在 $scope.user = {} 之类的对象中命名并添加了 user.name，然后我也无法在 html 模板中绑定名称。

Main.js

 $stateProvider
        .state('index', {
            parent: 'app',
            abstract : true,
            url: '/index',
            views: {
                'content@': {
                    templateUrl: urlpath+'ngtemplates/chat/chat.menu.html',
                    controller: ['$state',function ($state) {
                      $state.go('screen.welcome');
                    }]
                }
            }
        })
        .state('screen.welcome', {
            url: '',
                    templateUrl: urlpath+'templates/page1.html',
                    controller:'Controller1'
        })
        .state('screen.details', {
            url: '',
                    templateUrl: urlpath+'templates/page2.html',
                    controller:'Controller2'
        })

Controller1.js

$scope.selected = function(){
$scope.name = "Jim";
}

generic.html

<div ng-app="sampleapp">
<h1> Hi, Welcome! </h1>
<p> {{name}} </p>
</div>

【问题讨论】：

您好，您是否在模板中使用了 ng-app 指令，如果未使用，则 HTML 将按原样显示表达式。

标签： javascript jquery angularjs

【解决方案1】：

您需要将控制器添加到模板中

   <div ng-app="sampleapp">
     <div ng-controller = "Controller1"> //controller added 
        <h1> Hi, Welcome! </h1>
        <p> {{name}} </p>
    </div>
        </div>

【讨论】：

【解决方案2】：

您也可以使用 controllerAs 语法。

.state('screen.details', {
        url: '',
                templateUrl: urlpath+'templates/page2.html',
                controllerAs:'vm'
    })

在 Html 中，您可以像 {{vm.name}} 一样访问。

这里的要点是，如果您使用 ControllerAs 语法，则无需将 ng-controller 放入 HTML。

【讨论】：