AngularJS 指令、ControllerAs、范围和 vm 属性 [英] AngularJS directive, ControllerAs, scope and vm property

问题描述

使用 Angular 我创建了一个这样的指令:

角度.module('我的模块', []).directive('myDirective', function () {返回 {限制:'E'，templateUrl: currentScriptPath.replace('.js', '.html'),范围: {场景:'='},控制器:MyDirectiveController，控制器为:'vm'，bindToController: 真，替换:真}});

MyDirectiveController:

MyDirectiveController.$inject = ['$scope'];函数 MyDirectiveController($scope) {var vm = 这个；vm.scenarios = $scope.scenarios;}

我的指令 HTML 模板是这样的:

{{vm.scenarios[0].name}}

在我的父视图 HTML 中，我以这种方式使用指令:

<my-directive scripts="vm.scenarios"></my-directive>

父控制器有一个属性:

vm.scenarios = []//可以是 [{ name : "test"}]

由于父控制器的 vm.scenarios 在 $http 调用后被设置，当指令控制器的 vm.scenarios 绑定到$scope.scenarios 并且当父控制器 vm.scenarios 最终被填充时它不会更新.

将此添加到我的指令控制器时，它可以工作，但解决方案对我来说似乎是错误的:

$scope.$watch('scenarios', function(newValue) {如果(新值！== 未定义){vm.scenarios = $scope.scenarios;}});

解决方案

这是你应该如何定义你的指令控制器:

MyDirectiveController.$inject = [];函数 MyDirectiveController() {//这里没有什么}

您不需要使用$scope，因为您已经绑定到控制器实例this.这意味着范围配置

范围:{场景:'='},

填充控制器实例 this 对象，而不是 $scope 对象，因此 $scope.scenarios 是 undefined.使用 vm.scenarios = $scope.scenarios; 在控制器中，您只需用未定义的值覆盖正确的绑定.

演示: http://plnkr.co/edit/lYg15Xpb3CsbQGIb37ya?p=预览

Using Angular I created a directive like this:

angular
    .module('my-module', [])
    .directive('myDirective', function () {

        return {
            restrict: 'E',
            templateUrl: currentScriptPath.replace('.js', '.html'),
            scope: {
                scenarios: '='
            },
            controller: MyDirectiveController,
            controllerAs: 'vm',
            bindToController: true,
            replace: true
        }

    });

MyDirectiveController:

MyDirectiveController.$inject = ['$scope'];

function MyDirectiveController($scope) {
    var vm = this;
    vm.scenarios = $scope.scenarios;
}

My directive HTML template is this:

<div>{{vm.scenarios[0].name}}</div>

In my parent view HTML I'm using the directive this way:

<my-directive scenarios="vm.scenarios"></my-directive>

The parent controller has a property:

vm.scenarios = [] // could be [{ name : "test"}]

As the vm.scenarios of the parent controller gets set after an $http call it is not available when the vm.scenarios of the directive controller is bound to the $scope.scenarios and it doesn't get updated when the parents controller vm.scenarios gets populated eventually.

When adding this to my directives controller, it works but the solution seems wrong to me:

$scope.$watch('scenarios', function(newValue) {
    if (newValue !== undefined) {
            vm.scenarios = $scope.scenarios;
    }
});

解决方案

This is how you should define your directive controller:

MyDirectiveController.$inject = [];

function MyDirectiveController() {
    // nothing here
}

You don't need to use $scope because you already bind to controller instance this. It means that scope config

scope: {
    scenarios: '='
},

populates controller instance this object, not $scope object, and hence $scope.scenarios is undefined. With vm.scenarios = $scope.scenarios; in controller you just overwrite correct binding with undefined value.

Demo: http://plnkr.co/edit/lYg15Xpb3CsbQGIb37ya?p=preview

这篇关于AngularJS 指令、ControllerAs、范围和 vm 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！