Javascript 棱角；作为语法的控制器"；，传递变量，并隔离作用域

我只是在做这个教程，这很有意义-。这里提供了一把小提琴：

它显示了如何使用@、=、&将属性绑定到父控制器范围

我想将小提琴改为使用“controller as syntax”，但似乎无法让它工作，我的小提琴在这里-

你有没有想过为什么这行不通

视图：

---

谢谢乔瑟姆的提醒。我在这里使用angular 1.2和“controller as”语法重写了这把小提琴：-

不确定从何处开始解决以前版本的问题：

• 在1.2中，独立作用域变量不能直接在DOM中使用， 它们必须在指令的模板中
• 我确保mydata是一个对象，以避免原型继承问题
• 使用@评估属性时，必须确保通过它 在{{}内

var-app=angular.module（“drinkApp”，[]）；
app.controller（“AppCtrl”，函数（$scope）{
此.ctrlFlavor={
数据：“黑莓”
}
var self=这个；
this.updateFoo=函数（newFoo）{
self.ctrlFlavor.data=newFoo；
}
})
应用指令（“饮料”，功能（）{
返回{
范围：{
isolatedBindingFoo:“=”，
isolatedAttributeFoo:“@”，
isolatedExpressionFoo:“&”
},
模板：“隔离绑定{isolatedBindingFoo}}
隔离属性{{isolatedAttributeFoo}}}隔离表达式Submit”
}
})

AngularJS视频嵌入
文件。写（“”）；
AppCtrl作用域
{{drinkCtrl.ctrlFlavor.data}

您确定即使不使用控制器作为语法，您的小提琴也能正常工作吗？它似乎对meya不起作用这个版本没有使用控制器作为语法-第一个指令与@绑定，第二个是双向绑定与=。第三个使用&调用父控制器上的函数。该fiddle使用的是过时的angular版本，不支持将控制器作为语法。看到下面的提琴，我刚刚将angular的版本更改为最新版本，您可以看到它是如何工作的：是的，如果您查看我的版本，您应该看到我已将angular的版本更改为1.2，该版本应支持控制器作为语法。即使使用该版本的angular，该指令仍然不起作用，即使不使用控制器作为语法：

<div ng-controller="MyCtrl as ctrl">
    <h2>Parent Scope</h2>
    <input ng-model="ctrl.foo"> <i>// Update to see how parent scope interacts with component scope</i>    
    <br><br>
    <!-- attribute-foo binds to a DOM attribute which is always
    a string. That is why we are wrapping it in curly braces so 
    that it can be interpolated. 
    -->
    <my-component attribute-foo="{{ctrl.foo}}" binding-foo="ctrl.foo" 
        isolated-expression-foo="ctrl.updateFoo(newFoo)" >
        <h2>Attribute</h2>
        <div>
            <strong>get:</strong> {{isolatedAttributeFoo}}
        </div>
        <div>
            <strong>set:</strong> <input ng-model="isolatedAttributeFoo">
            <i>// This does not update the parent scope.</i>
        </div>
        <h2>Binding</h2>
        <div>
            <strong>get:</strong> {{isolatedBindingFoo}}
        </div>
        <div>
            <strong>set:</strong> <input ng-model="isolatedBindingFoo">
            <i>// This does update the parent scope.</i>
        </div>
        <h2>Expression</h2>    
        <div>
            <input ng-model="isolatedFoo">
            <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
            <i>// And this calls a function on the parent scope.</i>
        </div>
    </my-component>
</div>

var myModule = angular.module('myModule', [])
    .directive('myComponent', function () {
        return {
            restrict:'E',
            scope:{
                /* NOTE: Normally I would set my attributes and bindings
                to be the same name but I wanted to delineate between 
                parent and isolated scope. */                
                isolatedAttributeFoo:'@attributeFoo',
                isolatedBindingFoo:'=bindingFoo',
                isolatedExpressionFoo:'&'
            }        
        };
    })
    .controller('MyCtrl', ['$scope', function ($scope) {
        this.foo = 'Hello!';
        var self = this;
        this.updateFoo = function (newFoo) {
            self.foo = newFoo;
        }
    }]);