angularjs自定义指令单向数据绑定

### 创建具有单向数据绑定的自定义指令

在 AngularJS 中，创建带有单向数据绑定的自定义指令涉及几个关键步骤。为了实现这一点，可以利用 `scope` 属性来配置属性绑定方式。

当构建自定义指令时，通过设置 scope 对象内的参数为 '@' 或者 '<' 来指定单向数据流：

- 使用 `'@'` 绑定字符串表达式到父作用域。
- 使用 `'<'` 实现组件间的单向数据传递（仅限于现代版本支持）。

对于 AngularJS (1.x)，通常采用 `'@'` 进行简单的字符串插值[^1]。

下面是一个具体的例子展示如何创建一个只读输入框作为自定义指令，并且该指令接收来自其父级的作用域变量而不允许反向修改它：

// 定义模块和控制器
var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
    $scope.message = "This message will be passed down.";
});

// 注册自定义指令
app.directive('readOnlyInput', function() {
    return {
        restrict: 'E',
        template: `<input type="text" ng-value="value" readonly>`,
        scope: {
            value: '@bindValue'
        }
    };
});

在这个案例里，`ng-value` 被用来显示文本框的内容而不会触发双向绑定机制；同时，在子指令内部声明了一个隔离作用域并指定了 `bindValue` 参数使用字符间插值的方式(`@`)来进行单向的数据流动。

#### HTML 部分

<div ng-app="myApp" ng-controller="MainCtrl">
    <!-- 使用自定义指令 -->
    <read-only-input bind-value="{{message}}"></read-only-input>
</div>

上述代码片段展示了如何在一个名为 `readOnlyInput` 的新元素上应用此自定义指令，并将其与父级 `$scope` 上的消息关联起来。由于采用了单向绑定模式 (`@`) ，因此即使用户尝试编辑这个不可编辑字段也不会影响原始模型状态。